當鼠標停止時，jQuery啓動懸停動畫

因此，我有一個滑動門式動畫，當鼠標懸停在框上時（現在我的示例在下面提供），它現在會熄滅。當鼠標懸停在div上時，我實際上只希望懸停動畫只在鼠標停在div上時發生，而不是在鼠標停在div上時發生，就像在Chrome網上應用店停止鼠標放置時一樣（https://chrome.google.com/webstore/category/home）當鼠標停止時，jQuery啓動懸停動畫

我當前的例子 http://jsfiddle.net/fvXgK/

編輯：只是爲了進一步澄清，就不會有出現此頁面上的多個單元。

感謝您提供任何幫助！

來源

2012-07-24 Stavros_S

這任何對你有好處？ http://www.jquery4u.com/events/writing-mousestop-event-plugin-jquery/#.UA7GO6AcvAk – 2012-07-24 16:04:05

你可以試試jQuery的hoverintent插件。

http://cherne.net/brian/resources/jquery.hoverIntent.html

來源

2012-07-24 16:04:29

這可以去評論！ – 2012-07-24 16:09:05

真棒建議有一種感覺，我可以與這一個去。 – 2012-07-24 17:17:21

最後結束了。用多個單元處理最平滑。 – 2012-07-24 18:28:38

我的建議是改變你的懸停事件。懸停獲取鼠標座標，然後開始一個超時，也許50-100毫秒。使用超時將當前鼠標座標與原始座標集進行比較。如果它們相同，並且動畫尚未執行，請執行動畫。這只是你可以嘗試的粗略想法。

編輯：還記得做一個鼠標懸停事件，停止超時。

來源

2012-07-24 16:02:49 hradac

+1似乎合法:) – 2012-07-24 16:04:41

是的，我可能會試圖實現這一點，我測試了一些插件後，提到。這似乎是一個非常聰明的做法，因爲我誠實地想要避免使用插件。 – 2012-07-24 17:22:36

你能否展示一個例子？ – 2012-07-24 17:36:28

這是我會怎麼做......它只是簡單：簡單明瞭：

$('.smallCell.slidedown').hover(function() { 
    $(".overlay", this).delay(1000).queue(function(){ 
    $(this).animate({ 
     top: '-260px' 
    }, { 
     queue: false, 
     duration: 300 
    }); 


    }); 
}, function() { 
    $(".overlay", this).animate({ 
     top: '0px' 
    }, { 
     queue: false, 
     duration: 300 
    }); 
});

，這也是自我解釋的：它會延遲1秒，你的排隊功能。

來源

2012-07-24 16:09:38 rafaelbiten

你所做的只是延遲一秒鐘。如果我將鼠標移到div上然後退出幾次，會發生什麼？OP想要在鼠標停止移動時觸發動畫。 – j08691 2012-07-24 16:11:59

upz，我的壞！再讀一次，你是對的。這不會像他想要的那樣工作=（「懸停意圖」應該可以解決這個問題 – rafaelbiten 2012-07-24 16:14:05

您可以使用setTimeout進行此操作，並與元素的存儲「懸停狀態」進行比較。如果您使用多個單元格，我的示例可能不是存儲懸停狀態的最佳方式，但該概念依然存在。

var TIME_UNTIL_SLIDE = 1000; 

var isHovering = false; 
var hovertimer; 

$('.smallCell.slidedown').hover(function() { 
    isHovering = true; 
    var $this = this; 
    hovertimer = setTimeout(function(){ 
     if(isHovering) { 
      $(".overlay", $this).stop().animate({ 
       top: '-260px' 
      }, { 
       queue: false, 
       duration: 300 
      }); 
     } 
    }, TIME_UNTIL_SLIDE); 

}, function() { 
    isHovering = false; 
    $(".overlay", this).stop().animate({ 
     top: '0px' 
    }, { 
     queue: false, 
     duration: 300 
    }); 
});

顯示在： http://jsfiddle.net/fvXgK/16/

來源

2012-07-24 16:15:35 Ben

感謝所有的答案，大家幫忙！所有這些似乎都是非常好的方法。並看看它是如何工作的，我一定會標記答案，一旦我選擇它再次Thankks！ – 2012-07-24 17:15:49