2013-02-18 70 views
1

我的問題是,我正在使用jquery函數'.hover()',它工作正常,如果我將鼠標緩慢移動到div上。當我把事情做好並開始非常快速地移動鼠標指針時,動畫不會停下來,甚至更糟!一切都開始在頁面上移動,而無需重置到其初始位置。.hover()函數。重置動畫

的代碼位:

$('.popProdContainer').hover(function(e){ 
      $(this).find('.pdtprice').stop().animate({"left": "-=70px"}, "slow"); 
      $(this).find('.pdtcartBkt, .pdtcartAdd').show('slow'); 
     },function(e){ 
      $(this).find('.pdtprice').stop().animate({"left": "+=70px"}, "slow"); 
      $(this).find('.pdtcartBkt, .pdtcartAdd').hide('slow'); 
}); 

所以,這就是我。試圖放在.animate後面:

.filter(':not(:animated)') 

沒有工作。

+1

你有沒有嘗試使用'.stop(真,真)'?但是,也許你應該查看[hoverIntent](http://cherne.net/brian/resources/jquery.hoverIntent.html)插件。 – Mottie 2013-02-18 22:32:52

+0

請不要編輯您的問題以包含解決方案......它會導致混淆,問題仍然是「開放」的。我把它翻了回來。請在下面發佈您的解決方案作爲答案。謝謝。 – Sparky 2013-02-18 23:41:42

+0

hoverIntent,也沒有工作。 – Souza 2013-02-19 01:42:48

回答

0

解決了這個問題。

我希望這原來幫助他人:

$('.popProdContainer').bind('mouseenter',function(){ 
    $('.pdtprice', this).animate({ 
     marginLeft: "-0.6in" 
    },500); 

    $('.pdtcartBkt', this).fadeIn('fast'); 
    $('.pdtcartAdd', this).fadeIn('fast'); 
}).bind('mouseleave',function(){ 
    $('.pdtprice', this).animate({ 
     marginLeft: "0.6in" 
    },500); 

    $('.pdtcartBkt', this).fadeOut('fast'); 
    $('.pdtcartAdd', this).fadeOut('fast'); 
});