4

背景画像にフェードアウト効果を適用しました。マウスアウト時に元のスタイルをゆっくり適用するにはどうすればよいですか?

jsfiddle: http://jsfiddle.net/KevinOrin/H6Q3J/

jQuery('.square-section').mouseover(function(){
    jQuery(this).fadeTo('slow',0.3, function(){
        jQuery(this).css('background-image', 'url(' + $img + ')');
    }).fadeTo('slow',1);
});
4

2 に答える 2

4

そもそも使用していない$img variable..だからコールバック関数は最初に必要ありません..

画像を完全に変更する場合は、ここでコールバック関数が役に立った可能性があります。

jQuery('.square-section').hover(function(){
    jQuery(this).fadeTo('slow',0.3);
}, function() {
    jQuery(this).fadeTo('slow',1);
});

フィドルをチェック

2つの異なる画像を交換したい場合は、このアプローチを試すことができます

jQuery('.square-section').hover(function(){
    jQuery(this).fadeTo('slow', 0.3, function() {
        jQuery('.square', this).removeClass('square-chess').addClass('square-chart');
        jQuery(this).fadeTo('fast', 1);
    });
}, function() {
    jQuery(this).fadeTo('fast', 0.3, function() {
       jQuery('.square', this).removeClass('square-chart').addClass('square-chess');
       jQuery(this).fadeTo('fast', 1);
    });
});

2つの画像をいじる

jQuery('.square-section').hover(function () {
    jQuery('.square', this).removeClass('square-chess').addClass('square-chart');
}, function () {
    jQuery('.square', this).removeClass('square-chart').addClass('square-chess');
});
于 2013-05-14T19:45:13.740 に答える
0 
jQuery('.square-section').mouseout(function(){
    jQuery(this).fadeTo('slow',0.3, function(){
        jQuery(this).css('background-image', 'url(' + $img + ')');
    }).fadeIn('slow',1);
});
于 2013-05-14T19:40:06.713 に答える