Question

我正在使用矩阵产品图像的页面，我想用jquery动画显示它显示一个接一个，我正在使用这样的代码

默认情况下，所有图像都处于隐藏状态。并且以下代码用于显示具有延迟的每个图像，因此它将一个接一个地显示

$(".container img").each(function(i) { $(this).delay(100*i).fadeIn(); });

这很好用，但问题是我有多少类别，如果用户点击第二类，则加载一个类别时保留第二类中显示的第一类图像

如何解决问题？

Answer 1

将您的类别选项按钮设为input type=button。只需在加载图像时禁用按钮，并在加载所有图像后，从输入中删除禁用，如下所示：

$("div input").click(function() {
   $("div input").attr('disabled',true);

   $(".container img").each(function(i) {
        $(this).delay(100*i).fadeIn();
   });

   $(".container img").promise().done(function() {
        $("div input").removeAttr('disabled');
   });

});

jQuery promise函数用于查找$(".container img)函数的结束点。您可以在http://api.jquery.com/promise/了解更多信息。

Jquery在页面加载时一个接一个地显示矩阵图像

1 个答案: