javascript - 使用jQuery一张一张地显示图库图像

我在一个基于wordpress的网站上拥有一个画廊。画廊图像一一出现在屏幕上，这是下面的代码。

$(".gallery-item").css({opacity:0});

$('.gallery-item').each(function(i) {

     $(this).delay(i * 300).animate({ opacity:1 }, 400);

});

它工作正常，但时不时刷新或单击图库页面，似乎所有图像立即出现然后消失并开始制作动画。有人知道为什么有时会发生这种情况吗？有什么解决办法吗？谢谢。

（我以前在CSS中使用opacity：0，但似乎某些浏览器无法显示图像，这使我将其保留在jquery中。）

最佳答案

这将是一种hack，但是您可以尝试放入css：

 .gallery-item {
     display: none;
  }

然后在js中：

$(".gallery-item").show().css({opacity:0}).each(function(i) {

     $(this).delay(i * 300).animate({ opacity:1 }, 400);

})

或使用：

.gallery-item {
     visibility: hidden;
  }

$(".gallery-item").each(function(i) {

     $(this).delay(i * 300).animate({ visibility: 'visible' }, 400);

})

希望能帮助到你。

关于javascript - 使用jQuery一张一张地显示图库图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29885227/