Jquery 鼠标悬停动画在鼠标快速移动时无法正常工作

我正在尝试在这个站点的标题上构建类似于滑动图像的东西

这是我的直播页面

当我将鼠标滑动到每个

div

上并稍等片刻时，它工作正常 但是，当我把鼠标快速地放在所有图片上时，它就不能正常工作，尤其是底部的小弹出子div（用于图片标题）

我的代码如下。带有

pics

类的div是那些滑动div，

sub

类div是底部的小标题div

<div id="wrapper">
    <div class="pics" id="pic1"><div class="sub">cccc</div></div>
    <div class="pics" id="pic2"><div class="sub">mmm</div></div>
    <div class="pics" id="pic3"><div class="sub">mmmm</div></div>
    <div class="pics" id="pic4"><div class="sub">mmm</div></div>
    <br  class="clearfloat"/>
</div>

jQuery

<script language="javascript">
    $(function(){
        $('.pics').mouseover(function() {
            /* firs resetting all the sub divs at the bottom to default (in case of Previous event) */
            $('.sub').hide();
            $('.sub').css('top','250px' );

            /*  ///////////////////////////// */

            $('.pics').not(this).animate({width:"86"},500 )
            $(this).animate({width:"400"},500 , function(){;
                var sub_div = $(this).find('.sub' );
                sub_div.show();
                sub_div.animate({top:"-=20"},500);
            })
        })
    })
</script>

$（函数（）{
$（'.pics'）.mouseover（函数（）{
/*firs将底部的所有子div重置为默认值（在以前事件的情况下）*/
$（'.sub'）.hide（）；
$（'.sub'）.css（'top'，'250px'）；
/*  ///////////////////////////// */
$（'.pics'）。不是（这个）。设置动画（{width:“86”}，500）
动画（{width:“400”}，500，function（）{；
var sub_div=$（this.find（'.sub'）；
sub_div.show（）；
子分区动画（{top::-=20”}，500）；
})
})
})

有一个额外的

在这一行：
$（this）.animate（{width:“400”}，500，function（）{；
<script language="javascript">
    $(function(){
        $('.pics').mouseover(function() {
            /* firs resetting all the sub divs at the bottom to default (in case of Previous event) */
            $('.sub').hide();
            $('.sub').css('top','250px' );

            /*  ///////////////////////////// */

            $('.pics').not(this).animate({width:"86"},500 )
            $(this).animate({width:"400"},500 , function(){;
                var sub_div = $(this).find('.sub' );
                sub_div.show();
                sub_div.animate({top:"-=20"},500);
            })
        })
    })
</script>

$(function(){
   $('.pics').mouseover(function(){
       $('.sub').hide().css('top', '250px');
       $('.pics').not(this).stop(true).animate({width: 86}, 500);
       $(this).stop(true).animate({width: 400}, 500, function() {
            var sub_div = $(this).find('.sub');
            sub_div.show().animate({top: "-=20px"}, 500);
       });
   });
});