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

Question

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

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

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

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

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

感谢您的每一个帮助，

斯科特

Answer 1

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

Answer 2

您的动画正在排队。为防止这种情况，请使用 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>