jQuery FadeIn 影响更改图像

Question

我有问题。我尝试通过以下代码将div 上的最后一个图像更改为新图像：

var rand = Math.floor(8*Math.random()+1);
$("#foto-"+ rand).fadeIn("slow", function() {
    $("#foto-"+ rand).html('<img style="position: relative;" height="100%" src="slides/'+ Math.floor(fotos*Math.random()+1) +'.jpg" />');
});

此代码更改图像，但不显示效果。

Answer 1

我认为你不能这样使用fadeIn。可以使用fadeIn使项目可见，但不能更改 DOM。您应该将animate用于自定义动画，如我在此处演示的那样：http://jsfiddle.net/KMuN3/。

但是，在这种情况下，animate可能是矫枉过正，因为您实际上只需要淡出和淡入。只需执行此操作：

var rand = Math.floor(8*Math.random()+1);
$("#foto-"+ rand).fadeOut();
$("#foto-"+ rand).html('<img style="position: relative;" height="100%" src="slides/'+ Math.floor(fotos*Math.random()+1) +'.jpg" />');
$("#foto-"+ rand).fadeIn();

Answer 2

试试这个：

var rand = Math.floor(8*Math.random()+1);
$("#foto-"+ rand).hide();
$("#foto-"+ rand).html('<img style="position: relative;" height="100%" src="slides/'+ Math.floor(fotos*Math.random()+1) +'.jpg" />');
$("#foto-"+ rand).fadeIn("slow");