我在背景图像上应用了淡出效果。如何在鼠标移出时慢慢恢复原来的样式?
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 variable
..所以在第一个中不需要回调函数。
如果您要完全更改图像,则回调函数可能处于帮助状态。
jQuery('.square-section').hover(function(){
jQuery(this).fadeTo('slow',0.3);
}, function() {
jQuery(this).fadeTo('slow',1);
});
检查小提琴
如果你想交换两个不同的图像,你可以试试这个方法
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);
});
});
jQuery('.square-section').hover(function () {
jQuery('.square', this).removeClass('square-chess').addClass('square-chart');
}, function () {
jQuery('.square', this).removeClass('square-chart').addClass('square-chess');
});
jQuery('.square-section').mouseout(function(){
jQuery(this).fadeTo('slow',0.3, function(){
jQuery(this).css('background-image', 'url(' + $img + ')');
}).fadeIn('slow',1);
});