0

我制作了一个 jsfiddle 以使其更易于解释。（http://jsfiddle.net/FPznm/）。我想要做的是，当您单击表格末尾的“Visa mer”按钮时，我希望隐藏的行延迟淡入。

它不能像现在这样工作，我不知道为什么。（请参阅 jsfiddle 上的 Javascript 窗口）。

问题是，如果我在效果消失.delay()之前添加一个，但它们仍然会显示。.fadeIn()fadeIn()

  for (i = 0; i <= increaseBy; i++) {
        hidden.eq(i).delay(i * 20).fadeIn(500);
        hidden.eq(i).removeClass("hidden");
    }

这是问题所在的代码。我想这.eq()就是让它不起作用的原因。

4

4 回答 4

1

那是因为removeClass执行速度比fadeIn方法快，您可以在动画完成时删除该类。

hidden.eq(i).delay(i * 20).fadeIn(500, function(){
    hidden.eq(i).removeClass("hidden");
});

http://jsfiddle.net/k28WT/

如果你想选择前 5 个元素，hidden你可以使用:lt选择器：

$(document).ready(function() {
    $("td.showMore").on('click', function() {
        $("tr.hidden:lt(5)").each(function(i){
            $(this).delay(i + 200).fadeIn(500, function(){
               $(this).removeClass('hidden')
            })
        })
    });
});

http://jsfiddle.net/vex3R/

于 2012-11-08T01:50:16.807 回答
1

我创建了一个小提琴来解释我的答案：http: //jsfiddle.net/3leven11/FPznm/5/

您需要做的就是：

$(document).ready(function() {
    $("td.showMore").on('click', function() {
        var increaseBy = 5;
        $("tr.hidden").each(function(index, elem) {
            if (index <= increaseBy) {
                $(elem).delay(index * 20).fadeIn(500, function() {$(elem).removeClass('hidden');});
            }
        });
    });
});​
于 2012-11-08T01:50:25.590 回答
1

问题是动画是异步的，所以你要立即删除类

试试这个吧..注意表格行的动画效果不好

$("td.showMore").on('click', function() {
        var hidden = $("tr.hidden"),
            increaseBy = 5;
        for (i = 0; i <= increaseBy; i++) {
            hidden.eq(i).delay(i * 200).fadeIn(1000, function(){ 
                   $(this).removeClass("hidden");
            });

        }
    });

编辑：另请注意，您的延迟20为 20 毫秒，即 1/50 秒，人眼甚至无法记录

于 2012-11-08T01:53:22.443 回答
1

您需要删除此行：hidden.eq(i).removeClass("hidden");

fadeIn是异步的：在内部它可能正在使用setTimeoutor setInterval。您已指定在 500 毫秒后完成淡入，但在hidden之后立即删除该类（无需等待 500 毫秒过去）

如果您需要在完成后更改一个类或做其他fadeIn事情，您可以提供一个回调fadeIn，这将在动画完成后执行。有关更多详细信息，请参见：http ://api.jquery.com/fadeIn/

于 2012-11-08T01:54:20.287 回答