Jquery 在表中显示新行的延迟影响

我做了一个jsfiddle来简化解释。(). 我想做的是，当你点击表格末尾的“Visa mer”按钮时，我希望隐藏的行被延迟淡入

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

问题是，如果我在

.fadeIn（）

之前添加

.delay（）

，则

fadeIn（）

效果会消失，但仍会显示出来

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

---

对于（i=0；i这是因为
removeClass
的执行速度比
fadeIn
方法快，所以可以在动画完成时删除该类

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


如果要选择前5个元素的
隐藏类
，可以使用
：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')
            })
        })
    });
});

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

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


如果要选择前5个元素的
隐藏类
，可以使用
：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')
            })
        })
    });
});

我制作了一把小提琴来解释我的答案：

您需要做的就是：

$(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');});
            }
        });
    });
});​

$（文档）.ready（函数（）{
$（“td.showMore”）。在（'click'，function（）上{
var增量=5；
$（“tr.hidden”）。每个（函数（索引，元素）{
如果（索引我创建了一个小提琴来解释我的答案：

您需要做的就是：

$(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');});
            }
        });
    });
});​

$（文档）.ready（函数（）{
$（“td.showMore”）。在（'click'，function（）上{
var增量=5；
$（“tr.hidden”）。每个（函数（索引，元素）{
如果（index问题是动画是异步的，那么您将立即删除该类

请尝试此操作。请注意，表格行的动画效果不好

$("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");
            });

        }
    });

$（“td.showMore”）。在（'click'，function（）上{
var hidden=$（“tr.hidden”），
增加=5；
对于（i=0；i而言，问题在于动画是异步的，因此您要立即删除该类

请尝试此操作。请注意，表格行的动画效果不好

$("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");
            });

        }
    });

$（“td.showMore”）。在（'click'，function（）上{
var hidden=$（“tr.hidden”），
增加=5；
对于（i=0；i您需要删除这一行：
hidden.eq（i）.removeClass（“hidden”）；

fadeIn
是异步的：在内部，它可能与
setTimeout
或
setInterval
一起工作。您已指定在500毫秒后完成fadeIn，但随后会立即删除
隐藏的
类（不等待500毫秒过去）

如果在
fadeIn
完成后需要更改类或执行其他操作，则可以提供对
fadeIn
的回调，该回调将在动画完成后执行。有关更多详细信息，请参阅：
您需要删除此行：
hidden.eq（i）.removeClass（“hidden”）；

fadeIn
是异步的：在内部，它可能与
setTimeout
或
setInterval
一起工作。您已指定在500毫秒后完成fadeIn，但随后会立即删除
隐藏的
类（不等待500毫秒过去）

如果在
fadeIn
完成后需要更改类或执行其他操作，则可以提供对
fadeIn
的回调，该回调将在动画完成后执行。有关更多详细信息，请参阅：
我最初是这样做的。但是使用$.each（）函数我很难限制它只显示接下来的5个隐藏元素。更新了我的答案以尊重increaseBy值。我一开始是这样做的。但是使用$.each（）函数我在限制它只显示接下来的5个隐藏元素时遇到问题。更新了我的答案以尊重increaseBy值。如果未删除该类，则需要修改逻辑以将新元素切片到show，如我所说，您只需在FadeIf的回调中删除该类。如果未删除该类，则需要修改逻辑以切分新元素以显示正如我所说，您只需在fadeInThis的回调中删除该类即可。但是，出于某种原因，它不会删除“隐藏”类。（请参阅）@WillB您确定，我可以在小提琴中看到该类已被删除。请检查此操作。但是，出于某种原因，它不会删除“隐藏”类。（请参阅）@WillB你确定吗，我可以在小提琴中看到类被删除了。检查这个谢谢！当你循环它时，20ms的延迟被乘以0-4。所以最后延迟是80ms。这些都是很短的延迟，但我确实得到了我想要的结果。嗯。我在尝试实现新脚本时遇到了一个我以前从未见过的错误。（见图）.syntax eror某处。使用Firebug将显示哪一行。在这里工作正常我不知道出了什么问题。编辑：我通过删除它并重新键入来修复它。谢谢！循环时20毫秒的延迟乘以0-4。因此最后延迟为80毫秒。这些延迟非常短，但我肯定得到了我想要的结果。嗯，我得到了一个错误当我尝试实现新脚本时，我以前从未见过。（参见图片）。语法eror某处。使用Firebug将显示哪一行。在这里工作正常，我不知道出了什么问题。编辑：我通过删除它并重新键入来修复它。