Question

我目前正在使用javascript将一些动画添加到一个矩形中，一旦动画完成，我将该框设置为不显示。请看下面的代码。

的Javascript

$(document).ready(function() {  
  $(".filled-rectangle").stop().animate({top:'20px'}, 5000).queue(function(next){
    $(".filled-rectangle").css('display', 'none'); 
  });
});

现在我想在像这样的容器中添加更多的框，

HTML

<div class="container">
  <div class="filled-rectangle"></div>
</div>

上面的代码现在正在处理一个div，.filled-rectangle 我想添加更多div，并对所有div使用相同的动画。

Answer 1

有多种方式。你可以使用嵌套的callbacks，这实际上让你在另一个完成之后执行一个函数。由于您使用了一个类（“填充矩形”），您可以在jquery中选择该类，并获取附加了类的所有元素的数组。此数组可用于使用each并为每个对象延迟所需的动画，但在这种情况下，您不能对每个对象使用不同的动画它必须相同。

看看这个例子 - ＆gt; https://stackoverflow.com/a/4661858/1841875

简而言之：

不同的动画：嵌套的回调/队列

多个对象上的相同动画：具有延迟动画的每个（）

在你的情况下使用每个延迟解决方案;）

使用javascript动画几个div

1 个答案: