您不能将一张图像淡入另一张图像,只能使用纯背景色等属性。
您可以做的是淡化包含图像的元素的不透明度。
使用这种方法,为了达到您想要的效果,您必须做的是让 2 个图像一个在另一个之上。
然后你可以淡出一个而淡入另一个。
所以像:
// write a little function to do a toggling fade
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
// make sure one layer is marked as active and shown and the other is hidden
$("#layer1").show();
$("#layer2").addClass('inactive').hide();
// then you can do this:
$("#button01").click(function () {
$("#layer1").fadeToggle('slow').toggleClass('inactive');
$("#layer2").fadeToggle('slow').toggleClass('inactive');
// then set the new background image for the hidden layer
$(".inactive").css({backgroundImage : 'url(image/staff/shinji.jpg)' } );
};
可能不是一个很好的方式,但我认为它应该工作。