jQuery로 애니메이션을 구현할 때 흔히 만나게 되는 문제가 하나 있다. 바로 애니메이션 큐(queue) 이다.
예를 들어, 네비게이션 메뉴에 마우스가 오면 애니메이션이 동작하게 코딩이 된 경우, 마우스를 여러번 움직였을 때, 이전 애니메이션이 멈추기 전까지 마지막 애니메이션이 동작하지 않는 현상이 바로 애니메이션 큐로 인해 발생하는 문제다.
이러한 문제가 일어나는 이유는 이벤트가 일어날 때마다 큐를 만들기 때문에 이들이 순차적으로 진행되면서 '원하지 않는' 효과가 나타나는 것이다.
사실 말로는 표현이 어려운데 아래 예제를 보면 바로 알 수 있다.
$(".nostop li").hover(
function () {
$(this).animate({width:"200px"},500);
},
function () {
$(this).animate({width:"80px"},500);
}
);
//animate with stop()
$(".stop li").hover(
function () {
$(this).stop().animate({width:"200px"},500);
},
function () {
$(this).stop().animate({width:"80px"},500);
}
);
div {
font: 12px black;
margin: 40px 0 10px 0;
}
li{
width:80px;
height:40px;
background:#444;
margin-bottom:10px;
}
.stop li{
background:#000;
}
<div>기존 이벤트에 대한 처리가 안되어 있는 경우</div>
<ul class="nostop">
<li></li>
<li></li>
<li></li>
</ul>
<div>기존 이벤트에 대한 처리가 되어 있는 경우</div>
<ul class="stop">
<li></li>
<li></li>
<li></li>
</ul>
<div>각 항목에 마우스를 올려놓기만 했을 때는 차이가 드러나지 않는다.<br/><br/>마우스를 위아래로 여러차례 빠르게 움직여보면 기존 애니메이션 이벤트에 대한 처리를 해준 것과 해주지 않은 차이가 드러난다.</div>
위의 예제를 보면 두 가지 케이스가 나온다. 위의 경우 마우스를 여러번 위아래로 움직이면 움직인 횟수만큼 바 애니메이션이 반복되는 것을 볼 수 있다. 반면 아래의 경우 마우스를 올려놓은 바에서만 애니메이션이 동작한다.
아래와 같이 기존 애니메이션을 중단하고 현재 애니메이션만 보여주기 원할 때는 jQuery가 제공하는 .stop() 메서드 하나만 써도 한번에 해결된다.
$(".trigger-element").hover(function() {
$(this).stop().animate({ width: "100px"}, 500);
}, function() {
$(this).stop().animate({ width: "80px" }, 500);
});
.stop() 이 호출되면 현재 동작하고 있는 애니메이션은 즉시 동작이 중단된다. 그리고 큐잉되어 있는 것 대신에 다음 동작이 즉시 수행된다. 하지만 .stop()은 애니메이션에 대해서만 동작하기 때문에 다른 종류의 큐를 중단하고 싶다면, .clearQueue() 를 대신 사용해야 한다.
|
|
추천 : 