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，但从未在之后显示。

在css('display','block')之前setTimeout()使用animate()：

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

您可以通过在初始化时设置opacity:0，在第二个opacity:1设置animate()来使其显得流畅;）

修改

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

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);
    });
}

首先jQuery .animate（）不起作用

1 个答案:

修改