为每个子级jquery设置动画 [英] animate each child jquery

问题描述

这应该多么简单，但我无法使它起作用，这真是令人惊讶.我希望一次为一组div设置动画.我正在为那些熟悉它的人使用animate.css.我以为我可能在此处找到了答案，但是jsFiddle无法在片刻.谁的代码是

It's amazing how simple this should be but I can't get it to work. I'm looking to animate a set of divs one at a time. I am using animate.css for those familiar with it. I thought I may have found the answer here but jsFiddle is not working at the moment. Anywho, the code is

$('.elements').each(function(i) { $(this).addClass('animated slideInLeft').delay(500); });

$('.elements').each(function(i) { $(this).addClass('animated slideInLeft').delay(500); });

问题在于，当我调试并逐步遍历每个元素时，每个元素都会发生动画，但是当我让它运行时，似乎所有动画都立即执行.一次实际显示一个动画需要什么?

The problem is that when I debug and step through each element, the animation is happening for each element but when I let it run, it appears to all do it at once. What is needed to actually show the animation one at a time?

谢谢

jsFiddle已备份，下面提供的链接没有帮助.答案不包括遍历元素，而是遍历动画本身.

jsFiddle is back up and that link provided below did not help. The answer did not include looping through elements, but looping the animation itself.

编辑2

这是一个小提琴，如果你们需要一个.

Here is a Fiddle to play with if you guys need one.

推荐答案

$('.elements').each(function(i) {
   delay =(i)*500;
   $(this).delay(delay).animate({
       opacity:1
    }, {
    duration: 500,
    complete: function() {
       $(this).addClass('animated slideInLeft');
    }
  });  
});

我将addClass移到了完整属性

您也可以尝试以下示例:

$('.element').hide()

$('.element').each(function(i) {
   delay =(i)*500;
   setTimeout(function (div) {
            div.show().addClass('animated slideInLeft');
        }, delay, $(this));
});

这篇关于为每个子级jquery设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！