jquery hover animate height (toggle)

Question

Я уверен, что это распространенная проблема, и я попытался использовать множество потоков на этом сайте, чтобы попытаться исправить мою проблему, но я не могу заставить ее работать исправно. В основном у меня есть дочернее меню, которое мне нужно показать, когда родитель был завис, но если вы отпустите указатель мыши над пунктом меню до его завершения, когда вы снова наведете его, новая высота переключения будет неправильной. Если это имеет смысл? На сайте я пытаюсь получить его работу на здесь:

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

Любая помощь был бы оценен :)

Answer 1

В качестве альтернативы вы можете попробовать это вместо того, чтобы остановить анимацию.

$("#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(); 
}); 

Answer 2

Вам нужно установить высоту для определенных значений вместо использования 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"); 
    }); 
}); 

Answer 3

У меня была такая же проблема, как и ты, и это, как я установил его:

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