Home › Forums › JavaScript › Jquery Fade Animation in Random Order
- This topic is empty.
-
AuthorPosts
-
June 7, 2013 at 8:54 am #45368ajnoguerraParticipant
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 #137972WillsonParticipantinstead 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 #138104ajnoguerraParticipantWow! 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 #138114David_LeitchParticipantWell, 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.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.