在for循环中使用jquery animate

时间:2016-09-20 00:03:26

标签: javascript jquery animation

我有动画,我不知道出了什么问题。我的淡入/淡出延迟不受尊重。我试图淡出一个瓷砖,用一个新瓷砖替换它并将其淡入。在这种情况下这样做了4次但是它可能因for循环而变化。

这是我的代码的缩短版本。在点击操作中,4个图块被新图块替换,但动画中没有延迟,即使在2000年。

for (var i = 0; i < animation.length; i++) {
    animation[i]['old']
        .animate({ opacity: 0 }, {
            duration: 500,
            queue: function () {
                jQuery(this)
                    .replaceWith(self.template(animation[i]['new']))
                    .css({ opacity: 0 })
                    .animate({ opacity: 100 }, 2000);
            }
        });
}

2 个答案:

答案 0 :(得分:0)

第一个动画的第二个参数是error.should function。

答案 1 :(得分:0)

我通过创建一个动画我的瓷砖动画来解决我的问题。我的问题的原因是我的淡入淡出动画是异步的,我的for循环是同步的。将动画封装在一个函数中,允许动画以某种同步的方式执行。这是我的粗略解决方案。

...
shuffle: function() {
    for (var i = 0; i < someTable.length; i++) {
        this.animate($tile, newTile);
    }
},
animate: function($tile, newTile) {
    $tile.fadeOut('slow', function () {
        var t = self.template(newTile).hide();
        $(this).replaceWith(t);
        t.fadeIn('slow');
    });
}
...