jquery - 鼠标悬停动画继续进行，而不是在快速移动时重置到原始位置

Question

你好，这是我的实时页面

http://mehrdadkhoshbakht.com/test/index.html

标题上有一个 jquery 滑动动画 我的问题是滑动图片底部的那些小灰色 slideup 潜水他们假设在鼠标悬停时向上滑动，然后重新设置到原来的位置，他们会缓慢移动

动画:

sub_div.animate({top:"-=20"},500);})

并重置:

    $('.sub').hide();
    $('.sub').css('top','190px' );

但是如果我在图片上快速移动鼠标，标题会不断出现。但我确实在代码的开头重置了它们的位置，所以这不会发生，但仍然没有运气

我试过了

sub_div.stop(true).animate({top:"-=20"},500);})

没用

这是我的html图片类的div是那些滑动的div，子类的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>

我的 jq 函数

<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','190px' );

               /*  resizing all the divs to 86px exept mouse overed one !*/

            $('.pics').not(this).stop(true).animate({width:"86"},500 )

               /*  setting $this div to 400px */
            $(this).animate({width:"400"},500 , function(){

                   /* sliding up little title div at the bottom */
            var sub_div = $(this).find('.sub' );
            sub_div.show();
            sub_div.animate({top:"-=20"},500);})
         })


})
</script>

我的另一个问题是这个小标题 div 出现在它们父 div 的外部我希望它们出现在你进入它们的 parrend div 区域时我确实将他们的 parrent div over flow 设置为隐藏，但我猜这不适用于绝对位置

这是我的CSS

/* slides parent div */
.container .header .top_pics {
    background-color: #F5D80A;
    position: relative;
    padding-bottom: 30px;
    padding-left: 20px;
    float: left;
    width: 680px;
}

/* sliding pictures (or divs) */
.container .header .top_pics .pics {
    width: 86px;
    float: left;
    height: 200px;
    overflow: hidden;

}
/* little slide up titles  */
.header .top_pics .sub  {
    background-color: #CCC;
    position: absolute;
    width: 395px;
    top: 200px;
    opacity : 5.0;
    display: none;
    padding-left: 5px;
    padding-top: 9px;
    padding-bottom: 9px;
}

/* each sliding pic*/
.header #pic1 {
    width: 400px;
    background-image: url(images/h1.jpg);
    background-repeat: no-repeat;
}
.header #pic2 {
    background-color: #0C9;
}

.header #pic3 {
    background-color: #C30;
}

.header #pic4 {
    background-color: #CCC;
}

Answer 1

问题是 top 属性的相关动画 (-=20)。尝试将其更改为您想要为该属性设置动画的实际固定像素值，例如:如果它们以 top: 190px 开头，请尝试将您的 animate 函数更改为 sub_div.animate({top:'170px'},500);}).