如何在具有相同类的多个元素中随机化jquery动画

时间:2013-01-29 13:34:49

标签: jquery animation

我有10个相同类“.tile”的盒子,我写了一段jquery代码,它将在文档加载时运行:

HTML:

<li>
    <a class="tile" href="#dev">
        <div class="boximg"></div>
        <div class="boxttl">
            <span class="engttl">Develope Your Mobile</span>
            <span class="fattl">آموزش و توسعه موبایل</span>
        </div>
    </a>
</li>

JQUERY:

function func2($this) {
    if ($(this).find('.engttl').length)
        $this = this;

    if ($($this).attr('_to_animate') != 'true')
        return;

    $($this).find('.engttl').delay(2000).animate({marginTop:"-23px"},1100,'easeOutExpo',function(){
        var $this2 = this;
        setTimeout(function(){
            $($this2).animate({marginTop:"0"},1100,'easeOutExpo',function(){
                setTimeout(function(){ func2($this); },1500);
            });
        },1500);
    });
}
$('.tile').each(function(){
    $(this).attr('_to_animate', 'true');
    func2(this);
});

我的预期效果很好,但是如何在每个“.tile”之间随机化动画? 使用我的代码,在文档加载后,我们同时看到所有“.tile”的动画,但我想在不同的时间分别看到每个“.tile”的动画。 如果有人知道怎么做,我感激不尽? ..

1 个答案:

答案 0 :(得分:1)

.delay(2000)

切换.delay(Math.random() * 2000 + 1000)

2000和1000值总共产生1000到3000毫秒的延迟。您无需在random()的调用中使用任何参数。