Question

我正在尝试在此网站的标题上构建类似滑动图像的内容 http://www.metalmonde.co.uk/

这是我的实况页面 http://mehrdadkhoshbakht.com/test/index.html

当我将鼠标滑过每个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>

CSS

.header .pics {
    width: 86px;
    float: left;
    height: 200px;
}
.header .pics .sub  {
    background-color: #CCC;
    position: absolute;
    width: 80px;
    top: 250px;
    display: none;
}
.header #pic1 {
    background-color: #0CF;
    width: 400px;
}
.header #pic2 {
    background-color: #0C9;
}
.header #pic3 {
    background-color: #C30;
}
.header #pic4 {
    background-color: #CCC;
}

的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>

Answer 1

$(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);
       });
   });
});

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

1 个答案: