jquery - 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");