第一个jQuery.animate()不工作

Question

我对jQuery、JavaScript等很陌生我一直在努力制作一些动画：

目前，我在这里有一个部分工作演示：http://jsbin.com/uwonun/64/

多亏了jwags，第二个.animate（）可以工作了。

我一直在尝试实现相同的动画效果，这样我就可以替换.slideDown（）.

我最近的尝试可以在这里找到：http://jsbin.com/OYebomEB/1/

请注意，随着这项工作的继续，代码将发生变化。

function anim_loop(index) {
  $(elements[index]).css({top: 0, display: 'none'}).animate({top: -75},1000, function() {
    var $self = $(this);
    setTimeout(function() {
        $self.animate({top: $(window).height() + 10}, 1000);
        anim_loop((index + 1) % elements.length);
        }, 3000);
    });
}

Answer 1

您设置了display:none，但之后再也不会显示它。

在animate():之前，在setTimeout()中使用css('display','block')

setTimeout(function() {
    $self.css('display','block').animate({top: $(window).height() + 10}, 1000);
        anim_loop((index + 1) % elements.length);
    }, 3000);
});

您可以在初始化时设置opacity:0，在第二个animate()中设置opacity:1，使其平滑显示；）

编辑

为了让第一个循环像其他循环一样工作，您必须在元素在屏幕上渲染之前显示它们，方法是在animate():之前设置display:block

function anim_loop(index) {
  $(elements[index]).css({top:-75, display: 'block'}).animate({top: '+0'},1000, function() {
        var $self = $(this);
        setTimeout(function() {
$self.animate({top: $(window).height() + 10}, 1000);
            anim_loop((index + 1) % elements.length);
        }, 3000);
    });
}