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

我在背景图像上应用了淡出效果.如何在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);
});

解决方法:

你没有在第一个地方使用$img变量..所以第一个不需要回调函数.

如果要完全更改图像,则回调函数可能在此处有帮助.

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

Check Fiddle

如果要交换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);
    });
});

Fiddle with 2 images

jQuery('.square-section').hover(function () {
    jQuery('.square', this).removeClass('square-chess').addClass('square-chart');
}, function () {
    jQuery('.square', this).removeClass('square-chart').addClass('square-chess');
});