Question

有人可以评估我的代码并告诉我它是否正确。

我正在尝试一个接一个地运行一个动画，暂停5000毫秒，将所有高度重置为零并再次无限期地重复动画。

function animateThis(){
            $(".bars div:nth-child(1)").animate({'height':'49px'}, 2000, function() {
                $(".bars div:nth-child(2)").animate({'height':'112px'}, 2000, function() {
                    $(".bars div:nth-child(3)").animate({'height':'174px'}, 2000, function() {
                        $(".bars div:nth-child(4)").animate({'height':'236px'}, 2000, function() {
                            $(".bars div:nth-child(5)").animate({'height':'298px'}, 2000, function() {              
                                $('.bars div').delay(2000).css({"height" : "0"}), function() { animateThis()};
                            });
                        });
                    });                                                          
                });
            });
        }
    $(".bars").ready(function(){animateThis()});

可以在http://execusite.com/fazio/files/careers-banner/test.html

看到该示例

我已经从昨天收到的一些答案中重新格式化了它，但它仍然无效，我还没有收到任何反馈。

谢谢！

Answer 1

你可以这样做：

示例： http://jsfiddle.net/patrick_dw/T5acF/4/

function animateThis() {
    var length = $('.bars div').stop().each(function(i, val) {
        $(val).delay(i * 2000).animate({ height: (i * 62) + 49 }, 2000, function() {
            if (i === (length - 1)) {
                $('.bars div').animate({ height: 0 }, 2000, animateThis);
            }
        });
    }).length;
}

$(document).ready(function() { animateThis(); });

编辑：没有注意到动画回到0。已修复此更新版本。

编辑：在新.stop()之前添加.each()似乎可以解决我遇到的问题。

编辑：将$(this).index()替换为i（代表相同的索引），使其效率更高。

我显然没有给予足够的关注。您不希望将高度设置为0的动画，而是希望延迟5000毫秒，然后立即重置。

示例： http://jsfiddle.net/patrick_dw/T5acF/5/

function animateThis() {
    var length = $('.bars div').each(function(i, val) {
        $(val).delay(i * 2000).animate({ height: (i * 62) + 49 }, 2000, function() {
            if (i === (length - 1)) {
                setTimeout(function() {
                     $('.bars div').height(0);
                     animateThis();
                }, 5000);
            }
        });
    }).length;
}

$(document).ready(function() { animateThis(); });

Answer 2

试试这个：

function animateThis() {
    var divs = $(".bars div").get();
    var time = 2000;
    $(divs[0]).animate({'height': '49px'}, time, function() {
        $(divs[1]).animate({'height': '112px'}, time, function() {
            $(divs[2]).animate({'height': '174px'}, time, function() {
                $(divs[3]).animate({'height': '236px'}, time, function() {
                    $(divs[4]).animate({'height': '298px'}, time, function() {
                        setTimeout(function() {
                            $(divs).css('height', '0px');
                            animateThis();
                        }, time);
                    });
                });
            });
        });
    });
}

注意： 此代码是多余的。我写这篇文章只是为了展示如何使代码更有效（通过摆脱不必要的选择器查询）。如果我是你，我会选择帕特里克的答案。

Answer 3

var animateThis = function(){
            $(".bars div:nth-child(1)").animate({'height':'49px'}, 2000, function() {
                $(".bars div:nth-child(2)").animate({'height':'112px'}, 2000, function() {
                    $(".bars div:nth-child(3)").animate({'height':'174px'}, 2000, function() {
                        $(".bars div:nth-child(4)").animate({'height':'236px'}, 2000, function() {
                            $(".bars div:nth-child(5)").animate({'height':'298px'}, 2000, function() {              
                                $('.bars div').delay(2000).animate({"height" : "0"}, 0), function() { animateThis()};
                            });
                        });
                    });                                                          
                });
            });
        };
    $(".bars").ready(function(){animateThis()});

Answer 4

~~delay(2000).css({"height" : "0"})~~

~~在这里，您没有指定延迟后要做的回调; .css调用会立即运行，因为.delay会立即返回（并且会设置回调，如果提供了回调，则稍后运行）。~~

.css()立即改变，而不是动画改变。在更改之前仍有延迟，但您可能很容易对此感到困惑，因为之前的转换确实有动画。看起来您打算将div重新放回原位，但您需要考虑上一次转换所花费的时间。就像你一样，你只是等待前一次过渡完成才赶上地方。

, function() { animateThis() };

在这里，您定义了一个未命名的回调函数，它调用animateThis（），但实际上并没有调用它 - 您没有将它提供给函数（例如 ~~delay~~ css animate）。即使我们实际上并不想为最后一次转换制作动画，但使用animate代替css可以让我们挂钩回调。

~~斯蒂芬在答案中提供了修复。~~试试这个：

$('.bars div').delay(4000).animate({"height": 0}, 0, function() { animateThis(); })

jquery动画重复，我的语法有什么问题？

4 个答案: