One way to do it:
jQuery.fn.fly = function(){
return this.each(function(){
$(this).animate({right: "250px", opacity: "1",
easing:"easeOutCubic"}, 1500, function(){
$(this).animate({right: "+=150px", opacity: "0",
easing:"easeOutCubic"}, 1500);
$(this).next('li').fly();
});
});
};
$(".alignleft").click(function(){
$("ul#flags li:first-child").fly();
});
- ricardo
On Oct 10, 11:14 am, Federisco <[EMAIL PROTECTED]> wrote:
> Hi all,
>
> I'll try and be brief. I'm new to jquery. And
> onhttp://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
