マウスオーバーアニメーションは右、私はここでは、このサイト <a href="http://www.metalmonde.co.uk/" rel="nofollow">http://www.metalmonde.co.uk/</a></p> <p>のヘッダにスライド画像のようなものを構築しようとしているマウスの速い動き

Question

に動作していない私のライブページには、それが動作 http://mehrdadkhoshbakht.com/test/index.html

です私がマウスを各divの上にスライドさせて少しだけ を待ちますが、マウスをすばやく動かすと、特に小さなポップアップサブディビジョンが正しく表示されません（画像タイトルの場合）。

私のコードは以下の通りです。 picsクラスのDivはそれらのスライディングdivであり、sub class 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; 
} 

`余分にあり

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