Hi all,
I'll try and be brief. I'm new to jquery. And on
http://monsterfish.bouncingfish.com/concepts/easyroaming/index.html,
I'm trying to animate a set of country flags and names so that they
fly/fade in from the right and fly/fade out to the left in sequence.
The animation works like a charm - click the iPass logo to see. I just
can't seem to find a way to make them fly in one after the other
instead of all at once. I've tried looping and queueing (using queue()
and pause()..) but so far I've only been able to disable the script.
XHTML:
<ul id="flags">
<li id="0"><img src="assets/images/flags/i1.gif" alt=" " />
Iraq</li>
<li id="1"><img src="assets/images/flags/ir.gif" alt=" " />
Iran</li>
<li id="2"><img src="assets/images/flags/kp.gif" alt=" " />
North Korea</li>
<li id="3"><img src="assets/images/flags/cu.gif" alt=" " />
Cuba</li>
<li id="4"><img src="assets/images/flags/ly.gif" alt=" " />
Libya</li>
<li id="5"><img src="assets/images/flags/sy.gif" alt=" " />
Syria</li>
</ul>
jQuery:
$(document).ready(function(){
$("ul#flags li").css("opacity", "0");
$(".alignleft").click(function(){
$("ul#flags li").each(function(){
$(this).animate({right: "250px", opacity: "1", easing:
"easeOutCubic"}, 1500, function(){
$(this).animate({right: "+=150px", opacity: "0", easing:
"easeOutCubic"}, 1500);
});
});
});
});
If anyone could help me out and show me how to turn this code into a
slick looping beast, it'd be greatly appreciated!
I initially wanted it to me randomised, but I'm not sure how easy that
is to do...? It's not crucial.
Many thanks,
Fredrik
