высота при наведении курсора

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