jQuery 애니메이션 : 일단 마우스가 나오면 애니메이션을 멈춤

Question

div을 마우스로 움직이거나 마우스를 올리면 마우스를 움직여 나가기 위해 노력하고 있습니다. 그러나, 내가 여러 번 들락날을 걸어 갔을 때, div은 기본적으로 내가 호버 한 횟수만큼 앞뒤로 계속 움직였습니다. 이 jsFiddle example을 참조하십시오.

아마 짐작 했겠지만, 내가 마우스를 몇 번이나 썼는지에 관계없이 마우스가 요소 외부에 있으면 div이 멈추도록 (즉, 미끄러 져 들어가기를) 바라고 있습니다. jQuery 애니메이션에 대한 이해가 부족하다고 생각합니다.

$("#state-slider").hover(function() { 
    $(this).animate({ 
    left: '0' 
    }, 500); 
}, function() { 
    $(this).animate({ left: "-270" }, 500); 
}); 

감사합니다.

Answer 1

jQuery .stop() function이 필요합니다. 새 애니메이션을 시작하기 전에 명령 체인에 삽입하여 진행중인 애니메이션을 중단하십시오.

$('#state-slider').hover(function() { 
    $(this).stop().animate({ left: 0 }, 500); 
}, function() { 
    $(this).stop().animate({ left: -270 }, 500); 
}); 

Working jsFiddle =)

Answer 2

$("#state-slider").hover(function() { 
    $(this).animate({ 
    left: '0' 
    }, 500); 
}, function() { 
    $(this).stop(true,true).animate({ left: "-270" }, 500); 
}); 

DEMO

http://api.jquery.com/stop/

Answer 3

예

http://jsfiddle.net/amkrtchyan/TQz5U/1/

가

및 jquery code

$(function() { 
    $("#state-slider").hover(function() { 
     $(this).stop(true,true).animate({ 
      left: '0' 
     }, 500); 
    }, function() { 
     $(this).stop(true,true).animate({ left: "-270" }, 500); 
    }); 
});