728x90
반응형
SMALL
안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
yeonee 블로그 : 네이버 블로그
예쁘고 맛있게 먹고 건강하게,강인하지만 온화하게 행하라. ※맛스타운스타일상 인스타 www.instagram.com/s2._.y25n ※맛집감성일상 유튜브https://youtube.com/channel/@S2_yeonee 티스토리https://yeoneeluv.tistory.co
blog.naver.com
* 효과란?
- 자바스크립트와 CSS를 이용해서 HTML엘리먼트에 동적인 효과를 줄 수 있다.
- jQuery의 효과 메소드를 호출하는 것만으로 간단히 효과를 줄 수 있다.
예제1.
<!DOCTYPE html>
<html>
<head>
<style> span {
color:red;
cursor:pointer;
}
div {
margin:3px;
width:80px;
height:80px;
}
div {
background:#f00;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="button" id="fadeout" value="fade out" />
<input type="button" id="fadein" value="fade in" />
<input type="button" id="hide" value="hide" />
<input type="button" id="show" value="show" />
<input type="button" id="slidedown" value="slide down" />
<input type="button" id="slideup" value="slide up" />
<input type="button" id="mix" value="mix" />
<div id="target">
target
</div>
<script>$('input[type="button"]').click( function(e) {
var $this = $(e.target);
switch($this.attr('id')) {
case 'fadeout':
$('#target').fadeOut('slow');
break;
case 'fadein':
$('#target').fadeIn('slow');
break;
case 'hide':
$('#target').hide();
break;
case 'show':
$('#target').show();
break;
case 'slidedown':
$('#target').hide().slideDown('slow');
break;
case 'slideup':
$('#target').slideUp('slow');
break;
case 'mix':
$('#target').fadeOut('slow').fadeIn('slow').delay(1000).slideUp().slideDown('slow', function(){alert('end')});
break;
}
})
</script>
</body>
</html>
예제2.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go">
» Run
</button>
<div id="block">
Hello!
</div>
<script>/* Using multiple unit types within one animation. */
$("#go").click( function() {
$("#block").animate({
width: "300px",
opacity: 0.4,
marginLeft: "50px",
fontSize: "30px",
borderWidth: "10px"
}, 3000);
});</script>
</body>
</html>mix부분이 좀 실생활 이용에 더 가까울 듯하였는데, 실제 프로젝트 등을 진행하면서 간단한 홈페이지에 프론트 등을 구성해보니 animation을 많이 사용하게 되는 것을 느꼈다.
시간으로 반응을 나누어 적용하다 보니, 함수 안에는 내가 원한 animation의 완성된 모습의 코드를 적게 되는 것이다.
다음글>>
+ 아래의 링크를 참고하여 공부하였습니다.
728x90
반응형
LIST
'VsCode(HTML) > 3. JQUERY' 카테고리의 다른 글
| JQUERY - jQuery 기본 문법 및 js와 차이점, 셀렉터 이벤트 등록, jQuery 체이닝 (1) | 2023.08.20 |
|---|---|
| JQUERY - ajax (1) | 2023.07.10 |
| JQUERY - Traversing (탐색) 요약정리 (0) | 2023.07.09 |
| JQUERY - 9. Traversing 탐색 (0) | 2023.07.09 |
| JQUERY - 선택자(Selector) 요약 정리 (0) | 2023.07.09 |
