CODEWITHSUNDEEP
jqueryanimation
Payam Shakibafar
Payam Shakibafar

Reputation: 1125

How to randomize a jquery animation among several elements with same class

I have 10 boxes with same class ".tile" and I've written a piece of jquery code which will be run when document's loaded :

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

it works fine how I expect, but how can I randomize the animation between each ".tile" ? with my code, after document load, we see the animation for all ".tile"s in the same time, but I want to see the animation for each ".tile" separately in different time. I appreciate if anybody knows how to do that ? ..

Upvotes: 0

Views: 302

Answers (1)

paul
paul

Reputation: 22001

switch out your .delay(2000) for .delay(Math.random() * 2000 + 1000)

the 2000 and 1000 values make a delay between 1000 and 3000 milliseconds in total. You do not need to use any parameter in the call to random().

Upvotes: 1

Related Questions