jQuery - 動畫DIV上的鼠標移動

我試圖把我自己的動畫下拉菜單放在jQuery中，但得到奇怪的結果。我有一個包裝按鈕DIV和菜單DIV的容器，想法是（在鼠標懸停上）容器DIV和菜單DIV在菜單DIV獲得CSS {'display'，'block'}時縮放高度。在容器DIV的鼠標移出（這應該是縮放高度以包含按鈕和菜單DIV），我希望DIV縮放回原始高度，菜單DIV獲得CSS {'display'，'none 「}。jQuery - 動畫DIV上的鼠標移動

現在的問題是，在所有事情都按比例放大後，縮放容器的原始高度（高度：100px）後縮放開始，而不是按比例縮放容器的高度（高度：300px）新的那一個。

下面的代碼：

$('.container').mouseover(function(){ 
    $('.bob').css('display','block'); 
    $('.bob').animate({height: '200px'}); 
    $(this).animate({height: '300px'}); 
}); 

$('.container').mouseout(function(){ 
    $('.bob').animate({height: '0'}, 
      function(){ 
      $('.bob').css('display','none'); 
      }); 
    $(this).animate({height: '100px'}); 
});

來源

2012-08-15 Ray Lee

張貼在jsfiddle.net – 2012-08-15 14:47:25

演示添加一個回調函數的動畫。在此回調函數中，您再次設置高度顯式。 – 2012-08-15 14:51:25

您可能需要使用事件，以獲得「活」 .container元素在其狀態發生了改變。我還添加了stop（）函數，以便在mouseout/mouseover再次未完成之前停止動畫。

$(document).on('mouseover', '.container', function(){ 
    $('.bob').css('display','block'); 
    $('.bob').stop(true, false).animate({height: '200px'}); 
    $(this).stop(true, false).animate({height: '300px'}); 

}); 



$(document).on('mouseout', '.container', function(){ 
    $('.bob').stop(true, false).animate({height:0}, 
     function(){ 
      $('.bob').css('display','none'); 
     }); 
    $(this).stop(true, false).animate({height: '100px'}); 
});

編輯：這裏要求一個解釋：

這就像使用JQuery的（現在不建議使用）生活（）函數聽了稍後添加到DOM改變DOM元素或偶數元素時間由js。如果你只使用$（'。container'）。mouseover（），它將監聽頁面加載時處於狀態的dom元素 - 它只有100px高。它不會「意識到」元素已經改變。

停止功能在那裏，以便在新動畫開始之前，此時正在進行的元素的任何動畫都不會停止。

http://api.jquery.com/on/

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

來源

2012-08-15 14:57:47 m7o

就像魔術一樣。謝謝m7o！你介意解釋一下這個問題嗎？ – 2012-08-15 15:06:17

非常歡迎;-) – m7o 2012-08-15 15:15:57

我添加了一個解釋。 – m7o 2012-08-15 15:16:21

我不知道這是否會幫助你，但它解決了許多我的JQuery動畫的問題。

在對元素執行動畫之前，您可能需要檢查元素是否已被動畫化。你可以這樣做與此代碼

if($(elem).is(':animated')) {...}

希望這可以幫助你

來源

2012-08-15 14:48:31 Shadowxvii

我不認爲這是一個元素仍然是動畫的問題，因爲我試圖在離開之前將光標放在DIV上幾秒鐘。謝謝你，雖然！我相信它很快就會派上用場！ – 2012-08-15 15:10:56

添加停止（）修復它，所以是的，它是動畫。我是這樣一個噓聲大腦。 – 2012-08-15 15:23:51

jQuery - 動畫DIV上的鼠標移動

回答

相關問題