鼠標懸停動畫不上按鼠標右鍵，工作快速移動

Question

我試圖建立類似的滑動圖片上這個網站 http://www.metalmonde.co.uk/

這裏的標題是我的活頁 http://mehrdadkhoshbakht.com/test/index.html

它的工作原理當我將鼠標滑過每個div並等待一小會兒 ，但是當我快速地將鼠標移動到所有的鼠標上時，它無法正常工作，尤其是底部的小彈出子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; 
} 

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