Jquery mouseenter和mouseout動畫

我試圖在mouseenter和mouseout上做一個事件。如果我把鼠標懸停超過一次，它會重複我做它的次數，即使仍然在第一個動畫。我也試圖停止mouseleave上的動畫並將其動畫化。在此先感謝Jquery mouseenter和mouseout動畫

這裏是JavaScript的

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

這裏的HTML

<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>

來源

2012-11-02 JonnyDevv

@JonnyDevv：只有25％的你的問題有你接受一個答案是正確的。 –

好吧，我的壞話呢，會回顧所有回答的問題。我只能接受答案嗎？對不起所有:) – JonnyDevv

你所尋找的是.stop()

試試這個fiddle

兩件事情，我已經用stop取消任何當前正在運行的動畫。其次，我用絕對值代替了'+ = 50'和' - = 50'，因爲沒有這些，如果你繼續使用鼠標進入和退出，div將會越過屏幕越過越遠，我認爲這不是你的目標是什麼？

另一件需要記住的事情是，當在mouseenter上做一個動畫來移動或調整元素大小時，除非用戶在移動時「追逐」元素，否則可能最終會觸發mouseout事件。

來源

2012-11-02 18:36:03

我試過在沒有成功之前先停下來。 – JonnyDevv

感謝您的小提琴完成我想要的東西。 http://jsfiddle.net/JohnnyDevv/zSAjB/2/ – JonnyDevv

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

根據該圖像是「鼠標移開」，你可能想使用的CSS（）將圖像返回到原始位置。

來源

2012-11-02 18:34:41 pmandell

嗯它仍然排隊動畫。如果我在做第一個動畫時將鼠標懸停5次，它會動畫更多5次 – JonnyDevv

你可以試試這個..

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); 
     });  
});

來源

2012-11-02 19:55:00

Jquery mouseenter和mouseout動畫

回答

相關問題