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

Question

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

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

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

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

});

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

(我之前在 CSS 中使用了 opacity:0，但看起来图像不会在某些浏览器中显示，这让我将其保留在我的 jquery 中。)

Answer 1

这将是一种 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);

})

希望对您有所帮助。