更改背景圖片，淡出舊圖像兩次，然後在新的

消失，我有以下代碼：更改背景圖片，淡出舊圖像兩次，然後在新的

$('.active-bean-bag ul li').hover(function() { 
    var activeBeanBag = 'menu-' + $(this).attr("class"); 
    $('.active-bean-bag img.menu-image').fadeOut(); 
    $('.active-bean-bag img.menu-image').fadeIn(function(){ 
      $('.active-bean-bag img.menu-image').attr("src", '/images/'+activeBeanBag+'.png'); 
    }); 
});

然而，當我將鼠標懸停在不同的LI它看起來像它的舊圖像淡出兩次，然後進入，然後出局，然後淡入新的形象？任何想法爲什麼？

更新：

$('.active-bean-bag ul li').mouseover(function() { 
    var activeBeanBag = 'menu-' + $(this).attr("class"); 
    var newImage = '/skins/temaplate/customer/images/'+activeBeanBag+'.png'; 
    var $img = $('.active-bean-bag img.menu-image'); 
    if ($img.attr('src') != newImage) { 
     $img.fadeOut(function() { 
      $(this).attr("src", newImage).fadeIn(); 
     }); 
    } 
});

具有相同的結果也試過：

$(".active-bean-bag ul li").hover(function(e) { 
    e.preventDefault(); 
     var activeBeanBag = 'menu-' + $(this).attr("class"); 
    $('.active-bean-bag img.menu-image').fadeOut(400, function() { 
       $('.active-bean-bag img.menu-image').attr('src','/skins/template/customer/images/'+activeBeanBag+'.png'); 
     }).fadeIn(400); 
});

來源

2012-12-28 1Line

請您分享一個JSFiddle示例，我們可以看到問題所在？ – Josep

我在此處做了一個示例：http：/ /jsfiddle.net/XPthr/3/ – 1Line

致電fadeIn()和正在同步運行，爭奪不透明。相反，連鎖您fadeIn()調用的回調：

$('.active-bean-bag ul li').hover(function() { 
var activeBeanBag = 'basn0g' + $(this).attr("class"); 
$('.active-bean-bag img.menu-image').fadeOut(function(){ 
    $('.active-bean-bag img.menu-image').attr("src", 'http://www.schaik.com/pngsuite/'+activeBeanBag+'.png'); 
    $('.active-bean-bag img.menu-image').fadeIn(); 
});

}）;

在此的jsfiddle：http://jsfiddle.net/XPthr/5/。（我還將src作業更改爲在fadeIn()之前，以便它可以在新圖像可見的情況下淡入。

來源

2012-12-28 01:39:10

似乎得到當您將鼠標懸停在李項目上時，圖像錯誤。 – 1Line

i認爲它做的是前一個懸停的圖像，如果這是有道理的 – 1Line

我沒有看到它。你是在小提琴還是在自己的代碼中看到它？這裏是一個小插曲圖像內聯：http://jsfiddle.net/XPthr/6/。懸停時顯示正確的圖像。 –

試試這個：

$('.active-bean-bag ul li').mouseover(function() { 
    var activeBeanBag = 'basn0g' + $(this).attr("class"); 
    var newImage = 'http://www.schaik.com/pngsuite/'+activeBeanBag+'.png'; 
    var $img = $('.active-bean-bag img.menu-image'); 
    if ($img.attr('src') != newImage) { 
     $img.fadeOut(function() { 
      $(this).attr("src", newImage).fadeIn(); 
     }); 
    } 
});

這裏撥弄：http://jsfiddle.net/grantman16/XPthr/4/

當您使用懸停只一個參數，你將你的函數綁定到mouseenter和mouseleave事件。這就是它淡化兩次的原因。請參閱文檔：http://api.jquery.com/hover/

來源

2012-12-28 01:25:44 grant

我嘗試了我的原始示例，但似乎沒有工作，我改變了幾個位，比如類，因爲j sfiddle是一個快速編寫的版本 - 在主要問題中添加了代碼看看香港專業教育學院做錯了？ – 1Line

只是看着和站點正在使用的jQuery 1.5.2你 – 1Line

代碼看起來OK。你能解釋一下到底是什麼問題呢？ – grant

更改背景圖片，淡出舊圖像兩次，然後在新的

回答

相關問題