javascript - 如何在 jQuery mouseout 上应用原始样式

Question

我在背景图像上应用了淡出效果。如何在 mouseout 上慢慢应用回原始样式？

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);
});

Answer 1

你一开始就没有使用$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');
});

Answer 2

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