jquery - 基于下拉选择问题的jQuery交换图像

Question

所以我正在编写一个脚本，当您更改下拉选择时，它会更改图像源。

我一切正常，但是我遇到的问题是在交换时，原始图像显示/闪烁，然后显示新图像。我想要的是平滑的淡出和淡入......我认为我的脚本就是这样做的，但不知何故它不起作用。你能找出原因吗？

image.fadeTo('fast',0, function() {
     image.attr("src", newImageSource).fadeTo('fast',1);
});

这同样有效，但它先闪烁原始图像，然后再显示交换的图像。我什至尝试过延迟，但没有帮助。

Answer 1

image.fadeTo('fast',0, function() {
     var tempImg = $('<img src="' + newImageSource + '">');
     $(tempImg).load(function(){
         image.attr("src", newImageSource).fadeTo('fast',1);
     });
});

我用新的图像源创建了一个临时图像，然后一旦它被加载（记住它不在 DOM 中，用户永远不会看到它）另一个图像会淡入。这确保新图像之前已经加载试图淡化它，这可能是导致你口吃的原因。