jquery更改图像而不显示背景

Question

我使用jquery在单击按钮时将一个图像更改为另一个图像。代码：

var toChange = $('#toChange');
            toChange.fadeOut('fast', function(){
                toChange.attr('src','1.jpg');
                toChange.fadeIn();
            });

但是当点击按钮时，当前显示的图像淡出，然后显示几秒钟背景，然后只有第二张图像淡入。如何避免显示背景？

Answer 1

试试这个：

var toChange = $('#toChange');
toChange.fadeOut('fast')
        .attr('src','1.jpg')
        .fadeIn('fast');

Answer 2

如果你想用fadein切换两个图像，应该使用另一个临时元素，并在fadeOut之前执行fadeIn。有三个步骤：

1. 加载图片（U可以跳过此步骤，只是为了缓慢加载某些图像）
2. 淡出旧图像上的新图像
3. 删除旧图片

在每次回调时调用下一步：

var el = $('<img src="'+src+'" />').hide().appendTo($('.box'));

el.one('load', function() {
    el.fadeIn('slow', function() {
        $('.box img').first().remove();
    });
})

参见示例：http://jsfiddle.net/9zx32cg6/