當試圖同時動畫多個元素時jQuery動畫混亂

Question

我試圖淡出一個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(); 
     }, 
    }); 
}); 
}); 

可能的解決方案

我找到了另一個解決方案。在懸停函數開始時以及在「懸停」函數完成時，我調用reset（）函數。

功能復位（）{
$（圖集縮略圖。 '）的CSS（' 不透明度'，1）;
$（圖集縮略圖細節。 '）的CSS（' 不透明度「，0）;
}

對我來說這看起來沒問題。

Answer 1

需要停止線索動畫與stop()

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