jquery hover動畫高度（切換）

我確定這是一個常見問題，我嘗試了很多線程來嘗試解決我的問題，但我似乎無法使其正常工作。基本上我有一個孩子菜單，當父母被懸停時需要顯示，但是如果在完成加載之前將鼠標移出菜單項，當您將鼠標懸停在其上時，新的切換高度是錯誤的。如果這有道理？我試圖得到它的工作在該網站是在這裏：jquery hover動畫高度（切換）

http://annawhitlam.website.2011.360southclients.com/

（本關於我們的菜單有孩子）

而且我的代碼是：

$("#menu .content ul li.parent").hover(function(){ 
    $(this).find("ul").stop().animate({ height: "toggle" }, 150, "easeInSine"); 
}, function(){ 
    $(this).find("ul").stop().animate({ height: "toggle" }, 350, "easeInSine"); 
});

任何幫助將不勝感激:)

來源

2011-07-29 SoulieBaby

或者你可以嘗試，而不是停止動畫這一點。

$("#menu .content ul li.parent").hover(function(){ 
    if($(this).find("ul:not(:animated)").length) 
    $(this).find("ul").animate({ height: "toggle" }, 150, "easeInSine"); 
    else 
    $(this).find("ul").show(); 
}, function(){ 
    if($(this).find("ul:not(:animated)").length) 
     $(this).find("ul").animate({ height: "toggle" }, 350, "easeInSine"); 
    else 
     $(this).find("ul").hide(); 
});

來源

2011-07-29 04:23:17 ShankarSangoli

您需要將您的高度設置爲特定的值，而不是使用toggle。當某人在完成動畫之前將鼠標移動/移動到對象上時，它會保存在動畫中間的任何百分比處的切換高度。

爲了使動態，嘗試這樣的事情：

$(document).ready(function() { 

    var hoverObject = "#menu .content ul li.parent"; 

    var originalHeight = $(hoverObject).height(); 

    $(hoverObject).hover(function(){ 

     $(this).find("ul").stop().animate({ height: 0 }, 150, "easeInSine"); 
    }, function(){ 

     $(this).find("ul").stop().animate({ height: originalHeight }, 350, "easeInSine"); 
    }); 
});

來源

2011-07-29 04:20:35

請問有沒有什麼辦法讓它動？隨着高度的變化，就是這樣。 – SoulieBaby

我更新了我的答案。 –

我有同樣的問題，因爲你，這是我固定的方式：

$("#menu .content ul li.parent").hover(function(){ 
    $(this).find("ul").slideDown(150, "easeInSine"); 
}, function(){ 
    $(this).find("ul").slideUp(350, "easeInSine"); 
});

來源

2012-06-16 08:43:50 Niki

jquery hover動畫高度（切換）

回答

相關問題