Jquery mouseenter and mouseout animation

Question

나는 mouseenter와 mouseout에서 이벤트를 수행하려고합니다. mouseover를 한 번 이상 넣으면 첫 번째 애니메이션이더라도 여전히 그 횟수만큼 반복됩니다. 또한 mouseleave에서 애니메이션을 멈추고 다시 애니메이션으로 만들려고합니다. 여기

사전

에서 덕분에 (당신이 .CSS 사용 할 수 있습니다, 여기에 자바 스크립트

$('.velejador').mouseenter(function(){ 
    $('.velejador').animate({ 
     left: '-=50', 
     width: '40px' 
     }, 2000); 
}).mouseleave(function(){ 
    $('.velejador').animate({ 
     left: '+=50', 
     width: '40px' 
     }, 2000); 
}); 

<div id="hidden-cartoons"> 
    <img src="<?php echo base_url().'assets/img/cartoons/velejador.png' ?>" class="cartoon velejador"> 
    <img src="<?php echo base_url().'assets/img/cartoons/bodoleite.png' ?>" class="cartoon bodoleite"> 
</div> 

Answer 1

당신이 찾고있는 무슨 내가 현재 실행중인 애니메이션을 취소 stop을 사용했습니다, .stop()

이 fiddle

두 가지를 시도입니다. 둘째로, '+ = 50'과 '- = 50'을 절대 값으로 대체했습니다.이 값이 없으면 마우스를 계속 움직이면 div가 화면 위로 계속 이동합니다. 당신의 목표는 아닙니다.

기억해야 할 또 다른 사항은 요소를 이동하거나 크기를 조정하는 mouseenter에서 애니메이션을 수행 할 때 사용자가 요소를 이동하면서 "추격"하지 않으면 잠재적으로 mouseout 이벤트가 실행될 수 있습니다.

Answer 2

$('.velejador').mouseover(function() { 
    $('.velejador').animate({ 
     left: '-=50', 
     width: '40px' 
    }, 2000); 
}).mouseout(function() { 
    $('.velejador').animate({ 
     left: '+=50', 
     width: '40px' 
    }, 2000).stop(); 
}); 

이미지가 "로 마우스"에 위치에 따라 HTML의)를 눌러 이미지를 원래 위치로 되돌립니다.

Answer 3

당신이 시도 할 수 있습니다 ..

var velejador = $('.velejador'); 
var position = velejador.position(); 
velejador.mouseenter(function(){ 
    var $this = $(this); 
    console.log(position); 
    $this.css('left',position.left); 
    $this.stop(1,0).animate({ 
     left: '-=50', 
     width: '40px' 
     }, 2000,function(){ 
     $this.stop(1,0).animate({ 
      left: '+=50', 
      width: '40px' 
     }, 2000); 
     });  
});