Question

嗨，这是我的实况页面

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

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

动画：

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

并重置：

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

但是如果我快速移动鼠标，那么标题潜水就会继续进行。但我确实在代码开头重置了他们的位置，所以这不会发生，但仍然没有运气

我确实尝试了

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

它不起作用

这是我的HTML 带有pics类的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区域我确实设置了他们的流量隐藏的流量，但我geusse不能与absolut posation一起工作

这是我的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);})。

鼠标悬停动画继续运行，而不是在快速移动时重置为原始位置

1 个答案: