2012-12-30 32 views
1

我有以下代碼:將鼠標懸停在李名單上改變圖像,但不能趕上

$(document).ready(function(){ 
$('.active-bean-bag ul li.bean-bag-image').mouseover(function() { 
     var activeBeanBag = 'menu-' + $(this).attr("id"); 
     $('.active-bean-bag img.menu-image').stop(true, true).fadeOut(); 
     $('.active-bean-bag img.menu-image').fadeOut(function(){ 
       $('.active-bean-bag img.menu-image').attr("src", '/skins/template/customer/images/'+activeBeanBag+'.png'); 
       $('.active-bean-bag img.menu-image').fadeIn(); 
     }); 
}); 

});

但是當你搬過來的李選項快速得到你想要它不會趕上和一個顯示不正確的圖像提前

+0

請不要使用網址縮短服務,棧溢出,不收取你每字符,我們想知道我們要去哪裏當我們點擊一​​個鏈接。 –

+0

它是一個開發網站,我不希望它出現在谷歌的結果。 – 1Line

+0

不會,所有鏈接都有'rel =「nofollow」'來防止使用堆棧溢出作爲提高Google排名的手段。 –

回答

1

使用

感謝stop功能第一。這消除了任何排隊的動畫。

$('.selector').stop(true, true).fadeOut(); 

編輯::試試這個代碼:

$(document).ready(function(){ 
$('.active-bean-bag ul li.bean-bag-image').mouseover(function() { 
     var activeBeanBag = 'menu-' + $(this).attr("id"); 
     $('.active-bean-bag img.menu-image').stop(true, true).fadeOut(function(){ 
       $('.active-bean-bag img.menu-image').attr("src", '/skins/template/customer/images/'+activeBeanBag+'.png'); 
       $('.active-bean-bag img.menu-image').stop(true, true).fadeIn(); 
     }); 
}); 
+0

我今天早上再次測試,仍然跳躍.....我更新了上面的代碼- 那是對的嗎?它似乎淡出舊圖像,淡入淡出舊圖像淡入淡出新圖像而不是淡出舊圖像和淡入淡出新圖像 - 反正在預加載新圖像之前有效嗎? – 1Line

+0

@ 1Line檢查出更新的代碼 –

+0

這似乎使一切反應遲鈍,崩潰的火狐:) – 1Line