Grow your CSS skills. Land your dream job.

Jquery Fade Animation in Random Order

  • # June 7, 2013 at 8:54 am

    Hi I’m kind of doing my website with the links having a fading animation once the page loads. I tried searching on how to do it and luckily found people having a problem like mine. They were able to solve it eventually and it really looks good. But i was kinda hoping to do mine randomly fading as in, in random order.
    Please see this [codepen](http://codepen.io/ajnoguerra/pen/Lszqn “codepen”) .

    I’m kinda new to the development so I’m not that proficient yet in figuring this out. I hope you guys could help me out. If a solution wouldn’t be available, just at least share some tutorials on how to make animation in random order. I am eager to learn.

    Thanks.

    # June 7, 2013 at 9:46 am

    instead of incrementing i, you could create a function that generates a random number between 1 and 5, and have a while loop determine whether or not it is the same as the last number.

    for example:

    function getRand(max, min){
    var rand;
    rand = Math.floor(Math.random() * (max – min + 1) + min);

    return rand;
    }

    And then wherever you increment i, make a variable called something like oldI and set it to i.

    var oldI = i;

    and then put in a while loop to repeat the random function until you get a new number.

    while ( i === oldI ){
    i = getRand(5, 1);
    }

    I didn’t do a great job (not exactly sure how your code works, haven’t written jquery in a while), but here’s a forked example: http://codepen.io/WillsonSmith/pen/ELGfC

    Also I think my max/min values are wrong, you may want to do

    `getRand(4, 0);`

    and change the randomiser to
    `rand = Math.floor(Math.random() * (max – min));`

    # June 9, 2013 at 2:18 am

    Wow! I think you just did great here @Willson. I wish I could write jquery as you do but I’m still trying to. Anyway I think I’m gonna be needing a lot of tutorials about jquery. Thanks for the help! I’m sure there are others that will find this thread and your code helpful. :)

    # June 9, 2013 at 4:09 am

    Well, I had a play around with it and did a bit of Google-ing and came up with [something that works](http://codepen.io/David_Leitch/pen/krsnq “http://codepen.io/David_Leitch/pen/krsnq”), but isn’t the final answer. Perhaps just a spring board.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".