jQuery : Animate(animate() 메서드)
2023. 3. 16. 09:18ㆍjavascript/jQuery
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery - Animate</title>
<link rel="stylesheet" href="../../css/reset.css">
<link rel="stylesheet" href="../../css/dark.css">
<!-- jQuery CDN-->
<style>
#button {
width: max-content;
margin: 0 auto;
}
#box {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: gold;
}
/*------------------------------------------*/
#news-ticker {
width: 600px;
height: 2em;
border: 5px solid gold;
margin: 0 auto;
overflow: hidden;
}
#news-ticker > ul {
position: relative;
top: 0;
left: 0;
}
#news-ticker > ul > li {
height: 2em;
line-height: 2em;
padding: 0 1em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*----------------------------------------------------------------*/
#container {
width: 800px;
border: 10px solid white;
margin: 0 auto;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
#container > ul {
width: 500%;
position: relative;
top: 0;
left: 0;
}
#container > ul > li {
float: left;
width: 20%;
}
#container > ul > li > img {
display: block;
width: 100%;
}
</style>
<script>
$(function() {
// animate 메서드
// - 애니메이션을 만들기 위한 메서드
// = 사용자 지정 효과를 만들기 위한 메서드
// - 모든 스타일 속성을 다룰 수는 없고
// 속성 값이 숫자 값으로 설정되는 속성만 사용 가능
// - 스타일 속성 외의 다른 속성들도 사용될 수 있다.
// ex) scrollTop, scrollLeft
// - .animate(propertes [, duration] [, complete])
// 시각 효과 관련 메서드는 호출되면 해당 요소의
// '애니메이션 큐(Animation Queue)' 라는 저장소에 저장된다.
// 큐(Queue) : 선입선출(First In First Out) 구조
// : 먼저 들어온 애니메이션이 먼저 내보낸다.
// 시각 효과 메서드를 호출하게 되면 애니메이션 큐에 저장되고
// 진행 중인 애니메이션이 없으면 큐에 저장된 애니메이션을
// '하나 꺼낸 다음 효과를 진행한다.'
$("#hello1").on("click", function() {
$(this).animate({
// CSS Style Property
width: 200,
height: 200
}, 1000, function() {
// 효과가 끝난 다음 수행할 함수
$(this).html("complete!!");
});
});
//------------------------------------------------------
$("#hello2").on("click", function() {
//너비와 높이가 동시에 변한다.
// $(this).animate({
// // CSS Style Property
// width: 200,
// height: 200
// }, 1000);
// 만약 두 스타일 속성을 각각 animate() 메서드로
// 지정하게 되면 호출된 순서대로 시각 효과가 진행한다.
// → 다음에 진행할 시각 효과는 complete 로
// 함수를 전달할 필요 없이 메서드 체이닝으로
// 연속해서 animate 메서드를 호출하면 된다.
//
$(this)
.animate({width:200}, 1000) // px 단위 생략 가능
.animate({height:"+=200"}, 1000) // 복합 대입 연산자 지원
.animate({backgroundColor:"gold"}, 1000)
// 배경 색상은 지원되지 않으며, jQueryColor 플러그인을 이용하면 사용 가능
.fadeOut(1000)
// 저수준 시각 효과 메서드 또한 시각 효과 메서드이기 때문에
// animate() 메서드와 동시에 수행되지 않고 차례대로 수행한다.
.css({
backgroundColor:"yellowgreen",
color:"navy"
});
// css 메서드는 시각 효과 메서드가 아니기 때문에
// 메서드를 호출하자마자 바로 수행한다.
});
//------------------------------------------------------------------------------
var $box = $("#box");
$("#left").on("click", function() {
// #box 요소가 애니메이션 효과 중이면 핸들러를 종료
if($box.is(":animated")) return;
$box.animate({ marginLeft:"-=50" });
});
$("#right").on("click", function() {
if($box.is(":animated")) return;
$box.animate({ marginLeft:"+=50" });
});
$("#reset").on("click", function() {
if($box.is(":animated")) return;
$box.removeAttr("style");
});
//---------------------------------------------------------------------
var $commentsList = $("#news-ticker > ul");
var delay = 2000;
var duration = 400;
// 일정 시간 마다
window.setInterval(function() {
// ul 요소를 #news-ticker 요소의
// 높이만큼 위로 천천히 이동
$commentsList.animate({top:"-100%"}, duration, function() {
// ul 요소의 움직임이 끝나면
// ul 요소의 style 속성을 제거
// ul 요소의 첫 번째 자식 요소를
// ul 요소의 마지막 자식 요소로 이동
// $commentsList.removeAttr("style")
// .children(":first").appendTo($commentsList);
$(this).removeAttr("style")
.children(":first").appendTo($commentsList);
});
}, delay);
//---------------------------------------------------------------------
var $slide = $("#container > ul");
var delay2 = 3000;
var duration2 = 800;
function nextImageSlide() {
$slide.animate({left:"-100%"}, duration2, function() {
$(this).removeAttr("style")
.children(":first").appendTo(this);
});
}
var timerId = window.setInterval(nextImageSlide, delay2);
$("#container").hover(
// mouseenter 이벤트의 핸들러
function() {
// 마우스 포인터가 들어오면
window.clearInterval(timerId);
},
// mouseleave 이벤트 핸들러
function() {
// 마우스 포인터가 빠져 나오면
timerId = window.setInterval(nextImageSlide, delay2);
}
);
});
</script>
</head>
<body>
<h1 id="hello1" class="gray-box">Hello World!</h1>
<h1 id="hello2" class="gray-box">Hello World!</h1>
<div class="gray-box">
<div id="button">
<button id="left">«</button>
<button id="reset">RESET</button>
<button id="right">»</button>
</div>
<div id="box"></div>
</div>
<div class="gray-box">
<div id="news-ticker">
<ul>
<li>1. Donec sed risus nec risus ullamcorper pretium.</li>
<li>2. Proin dapibus velit eget est volutpat, ut vestibulum lacus feugiat.</li>
<li>3. Vivamus quis tellus ac enim consectetur semper quis in urna.</li>
<li>4. Mauris vel lectus in eros vulputate iaculis ac vitae turpis.</li>
<li>5. Phasellus elementum orci id nisl faucibus pretium.</li>
</ul>
</div> <!-- /#news-ticker -->
</div>
<div class="gray-box">
<div id="container">
<ul>
<li><img src="../../images/slide-11.png" alt="photo"></li>
<li><img src="../../images/slide-12.png" alt="photo"></li>
<li><img src="../../images/slide-13.png" alt="photo"></li>
<li><img src="../../images/slide-14.png" alt="photo"></li>
<li><img src="../../images/slide-15.png" alt="photo"></li>
</ul>
</div> <!-- /#container -->
</div>
</body>
</html>
'javascript > jQuery' 카테고리의 다른 글
| jQuery : Wheel(wheel 이벤트) (0) | 2023.03.16 |
|---|---|
| jQuery : Animation(애니메이션) 2 (0) | 2023.03.16 |
| jQuery : Animation(애니메이션) 1 (0) | 2023.03.16 |
| jQuery : each(each()메서드) (0) | 2023.03.16 |
| jQuery : Event(이벤트) 2 (0) | 2023.03.16 |