How to apply original style in jQuery mouseout

Question

I applied the fade effect on the background image. How to slowly apply the original style when displaying the mouse?

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

First of all, you are not using $img variable . Therefore, the callback function is not required in the first.

The callback function may have been enabled here if you are completely resizing the image.

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

Check feed

If you want to change 2 different images, you can try this approach

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

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

Answer 2

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