Jquery：悬停时显示动画和多个div的错误答案

【问题标题】：Jquery: Display error with animated and multiple divs on hoverJquery：悬停时显示动画和多个div的错误
【发布时间】：2012-07-06 21:52:41
【问题描述】：

我写了这个小jquery，它有一个很好的悬停效果。

但是，在某些鼠标悬停时，sccipt 似乎有问题，因为它似乎会导致动画效果循环。（通常在您将鼠标悬停在第二个和第三个 div 之间时）

有没有人建议如何解决这个问题？

http://test.gifix.de/index.php

抱歉，问题描述不佳，但我相信只要将鼠标悬停在示例上方，您就会看到它；）

感谢大家的帮助，

斯科特

【问题讨论】：

你确定不只是排队太多动画吗？您应该考虑清除队列。

标签： jquery html hover jquery-animate mouseenter

【解决方案1】：

您的动画正在排队。为防止这种情况，请使用 jQuery 停止功能：http://api.jquery.com/stop/

我更新了您的代码以包含停止功能的使用。它现在对我有用。这是更新的代码：

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('#blue-top').mouseenter(function(){
    $('#blue-top').stop(true).animate({height:'200'}, 500);
    $('#blue-middle').stop(true).animate({height:'80'}, 500);
    $('#blue-bottom').stop(true).animate({height:'80'}, 500);
});
$('#blue-top').mouseleave(function(){
    $('#blue-top').stop(true).animate({height:'120'}, 500);
    $('#blue-middle').stop(true).animate({height:'120'}, 500);
    $('#blue-bottom').stop(true).animate({height:'120'}, 500);
});

$('#blue-middle').mouseenter(function(){
    $('#blue-top').stop(true).animate({height:'80'}, 500);
    $('#blue-middle').stop(true).animate({height:'200'}, 500);
    $('#blue-bottom').stop(true).animate({height:'80'}, 500);
});
$('#blue-middle').mouseleave(function(){
    $('#blue-top').stop(true).animate({height:'120'}, 500);
    $('#blue-middle').stop(true).animate({height:'120'}, 500);
    $('#blue-bottom').stop(true).animate({height:'120'}, 500);
});

$('#blue-bottom').mouseenter(function(){
    $('#blue-top').stop(true).animate({height:'80'}, 500);
    $('#blue-middle').stop(true).animate({height:'80'}, 500);
    $('#blue-bottom').stop(true).animate({height:'200'}, 500);
});
$('#blue-bottom').mouseleave(function(){
    $('#blue-top').stop(true).animate({height:'120'}, 500);
    $('#blue-middle').stop(true).animate({height:'120'}, 500);
    $('#blue-bottom').stop(true).animate({height:'120'}, 500);
});


});//]]>  

</script>

【讨论】：

【解决方案2】：

我认为您可以通过在 div 上使用类来简化执行此操作的方式。我已经设置了JSFiddle。这是否实现了您正在尝试做的事情？

【讨论】：