如何更改對圖像懸停的影響？

Question

我有HTML代碼：

<ul id="foo2"> 
<li> 
    <img src="images/dandb.png" width="238" height="132" title="<span class='link-hover'>Merit Direct</span></br><br/> Polished, high-impact content including whitepapers, research reports, blog articles, advertorials," alt="" /> 
</li> 
<li> 
    <img src="images/demand_new.png" width="238" height="132" title="<span class='link-hover'>Merit Direct</span></br><br/> Polished, high-impact content including whitepapers, research reports, blog articles, advertorials," alt="" /> 
</li> 
</ul> 

，並在圖像的懸停我做了一個用波紋管腳本的滑動效果：通過運行此代碼對圖像懸停效果非常做

$(document).ready(function(){       
    var thumbs = $("#foo2 li img");  
    for (var i = 0, ii = thumbs.length; i < ii; i++){ 
     if (thumbs[i].title && thumbs[i].title.length > 0) 
     {   
      var imgtitle = thumbs[i].title;  
      $(thumbs[i]).wrap('<div class="wrapperblue" />').    
      after('<div class=\'captionblue\'>' + imgtitle + '</div>'). 
      removeAttr('title'); 
     }     
    } 
    $('.wrapperblue').hover(
     function(){ 
      $(this).find('img').animate({opacity: "6"}, 200);  
      $(this).find('.captionblue').animate({top:"-309px"}, 350);   
     }, 
     function(){ 
      $(this).find('img').animate({opacity: "6"}, 200);     
      $(this).find('.captionblue').animate({top:"0px"},200); 
     }  
    );   
}); 

快速。我希望該效果應該平滑，並且如果光標快速離開圖像懸停區域，那麼該效果應當在此時停止。它不能完成它的過渡。

我該怎麼做？

Answer 1

您應該調整計時器和stop功能上的防剝離

更改此

$(this).find('img').animate({opacity: "6"}, 200); 

這對所有線路

$(this).find('img').stop().animate({opacity: "6"}, 3000); 

注意的變化stop()和3000（速度）

編輯：改變了你的代碼

$('.wrapperblue').hover(
     function(){ 
      $(this).find('img').stop().animate({opacity: "6"}, 3000);  
      $(this).find('.captionblue').stop().animate({top:"-309px"}, 3000);   
     }, 
     function(){ 
      $(this).find('img').stop().animate({opacity: "6"}, 3000);     
      $(this).find('.captionblue').stop().animate({top:"0px"},3000); 
     }