jquery - Jquery在页面加载时一张一张显示矩阵图像

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/阅读更多内容。