Question

I am currently trying to create a (what i think) simple animation with jquery using three images, basically what i am trying to do is on the click function have the three boxes shuffle around really fast from left to right then stop back into the same position, then have a function at the end that i can throw code in for the end,

HTML

<div id="shuffleGame" class="clearfix" style="position: relative; overflow: visible;">
<img src="http://dev.thefragilemachine.com/capita/instantwin/imgs/gift_close.png" >
<img src="http://dev.thefragilemachine.com/capita/instantwin/imgs/gift_close.png" style="margin-left:10px; margin-right:10px;">
<img src="http://dev.thefragilemachine.com/capita/instantwin/imgs/gift_close.png" >
</div>

JQUERY

     $("a.goBtn").click(function (e) {
        e.preventDefault()
        $("div#theCards").hide();
        $("div#shuffleGame").fadeIn("fast");
        $("a.goBtn").fadeOut("slow");

        //Animations


     }); //$("a.goBtn").click(function { });

You can view what im trying to do here : dev.thefragilemachine.com/capita/instantwin/ani2.html , although nothing is really happening.

Thanks for any help, sorry if this does not make much sense wrote this kind of fast thanks

Answer 1

just figured it out, by using jQuery queue with animation, thanks!

http://api.jquery.com/queue/