Question

我使用下面的代码逐个淡入每个图像1.我怎么能在反转中执行此操作，以便图像以相反的顺序加载？

  img {display:none;}
  $('img').each(function(i) {
      $(this).delay(i * 100).fadeIn();
  });

Answer 1

你可以使用普通for循环而只是递减

for(var count = $('img').length-1; count >= 0; count--)
{
    $('img:eq('+count+')').fadeIn();
}

希望这有帮助。

Answer 2

这没关系

$($('img').get().reverse()).each(function(i) {
    $(this).delay(i * 100).fadeIn();
});

Answer 3

我不知道你有多少张图片，但你可以单独拍摄。

$(document).ready(function(){
 $("button").click(function(){
     $("#div1").fadeIn("1000");
     $("#div2").fadeIn("2000");
     $("#div3").fadeIn(3000);
     });

虽然对于大量图像我会等待

Answer 4

您可以使用reverse()。但请注意，如果您的图片具有样式display:none并且浮动，则它们将不占用空间。这意味着当它们以相反的顺序淡入时，它们会“跳跃”＃34;并导致闪烁效果。我建议使用visibility: hidden，以便图像在不可见时占用空间。

jsfiddle demo

jquery的

  $($("img").get().reverse()).each(function(i) {
      $(this).css('visibility','visible').hide().delay(i * 100).fadeIn();
  });

CSS

img{
    max-width:30%;
    visibility: hidden;
}

Jquery逐个淡入图像，反过来

4 个答案: