複数の要素を同時にアニメーション化しようとするとjQueryアニメーションが混乱する

Question

divを（画像が内部に）フェードアウトし、同時にdivをフェードインしようとしています。だから、ある種のトランジション効果があります。しかし、複数のdivにカーソルをあまりにも速く動かすと、あるフェードイン、いくつかのフェードアウト、そして最後にはまだ見えないものがあります。

スタイリング

.portfolio-thumbnail-detail { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 320px; 
    height: 320px; 
    display: none; 
} 

マークアップ

<div class="span5 portfolio-item" title="<?php echo $portfolio->ID; ?>"> 
    <a href="<?php echo $portfolio->guid ?>"> 
    <div class="portfolio-thumbnail" id="portfolio-thumbnail-<?php echo $portfolio->ID; ?>"> 
     <img src="image.png"> 
    </div> 
    <div class="portfolio-thumbnail-detail" id="portfolio-thumbnail-detail-<?php echo $portfolio->ID; ?>"> 
     Text 
    </div> 
    </a> 
</div> 

スクリプト

$(document).ready(function() { 
$('.portfolio-item').hover(function() { 
    var id = -1; 
    var image, detail; 

    id = $(this).attr('title'); 
    image = $('#portfolio-thumbnail-'+id); 
    detail = $('#portfolio-thumbnail-detail-'+id); 
    detail.css('opacity', 0); 
    detail.show(); 

    $(image).animate({ 
     opacity: 0, 
    }, { 
     duration: 400, 
     step: function(now, fx) { 
      detail.css('opacity', 1-now); 
     }, 
     complete: function() { 
      image.hide(); 
     }, 
    }); 
}, function() { 
    var id = -1; 
    var image, detail; 

    id = $(this).attr('title'); 
    image = $('#portfolio-thumbnail-'+id); 
    detail = $('#portfolio-thumbnail-detail-'+id); 
    image.css('opacity', 0); 
    image.show(); 

    $(detail).animate({ 
     opacity: 0, 
    }, { 
     duration: 400, 
     step: function(now, fx) { 
      image.css('opacity', 1-now); 
     }, 
     complete: function() { 
      detail.hide(); 
     }, 
    }); 
}); 
}); 

解決策

別の解決策が見つかりました。 リセット（）は、ホバー機能の開始時と「ホバーアウト」機能の完了時に呼び出されます。

機能リセット（）{
$（ 'ポートフォリオサムネイル。 '）、CSS（' 不透明度'、1）。 $（ '。portfolio-thumbnail-detail'）。css（ 'opacity'、0）;
}

Answer 1

stop()

$(image).stop().animate({ 
     opacity: 0, 
    }, { 
     duration: 400, 
     step: function(now, fx) { 
      detail.css('opacity', 1-now); 
     }, 
     complete: function() { 
      image.hide(); 
     }, 
    });