0

次のコードがあります。

$('.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の画像にカーソルを合わせると、古い画像で 2 回フェードアウトするように見えます。理由はありますか？

更新しました：

$('.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);
});
4

2 に答える 2

1

これを試して：

$('.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/

パラメーターを 1 つだけ指定して hover を使用する場合は、関数を mouseenter イベントと mouseleave イベントの両方にバインドします。そのため、2回フェードアウトしました。ここのドキュメントを参照してください: http://api.jquery.com/hover/

于 2012-12-28T01:25:44.090 に答える
0

fadeIn()との呼び出しfadeOut()が同時に実行され、不透明度をめぐって争っています。代わりに、fadeIn()呼び出しを のコールバックにチェーンしfadeOut()ます。

$('.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();
});

}); </p>

この jsfiddle のように: http://jsfiddle.net/XPthr/5/。(また、src割り当てを の前に変更fadeIn()して、新しい画像が表示された状態でフェードインするようにしました。

于 2012-12-28T01:39:10.440 に答える