Multiple looping animations on one element with jqfloat
<p>I'm trying to make an image do three things at once, and always animated (looping):</p>

<ul>
<li>JQfloat: Float around    </li>
<li>Width animation: Get smaller, then bigger    </li>
<li>Opacity animation: Fade, then unfade at a different duration than the width animation.</li>
</ul>

<p>(It's meant to be a floating sparkle)</p>

<p>I can achieve all of these on their own, but putting them together isn't working. </p>

<pre><code>    $(document).ready(function() {
       $('#test').jqFloat({
         width: 124,
         height: 479,
         speed: 3800
       });
        $("#test").each(function setAnim(){
            $(this).
                 animate({width: "10px",height: "10px",opacity: 0}, 2500).
                 animate({width: "35px",height: "35px",opacity: 1}, 2500, setAnim );      
        });
    });
</code></pre>

<p>Here's a Fiddle: <a href="http://jsfiddle.net/mJj7U/37/" rel="nofollow">http://jsfiddle.net/mJj7U/37/</a> </p>

<p>Right now, it's doing the float fine, but it pauses when it gets to the width and opacity animation and only runs the animation once. </p>

<p>I'm VERY new to javascript and jquery, so any help is greatly appreciated!</p>
