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中，用户将永远不会看到它），另一个图像被淡入。这确保新图像具有在尝试淡入之前已加载，这可能是导致口吃的原因。

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

1 个答案: