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上的鼠标移动

回答

相关问题