Start fading object after it has passed X miliseconds along animation
<p>I have an object animating, which I would like to start fading out, after a certain period of time. In other words, as an object moves from the top to the bottom of the screen, at about 75% of the way it starts to fade out.</p>

<p>For example, my function is so far:</p>

<pre><code>function parachute_drop(drop_object, animation_duration) {

var life = animation_duration * .75;

$(drop_object)
    .animate({top: "750px"},animation_duration)
    .animate({top:"-150px", opacity: 100
    },{
        duration: 0, 
        complete: function(){
            parachute_drop(drop_object,animation_duration);
        }

    });


}
</code></pre>

<p>Therefore if I were to run:</p>

<pre><code>parachute_drop('#parachute1',100000);
</code></pre>

<p>Then after the 'life' has been reached (100000 x .75) = 75000ms it would start fading out to 0. After which the animation completes, and returns back to full opacity.</p>

<p>I have been struggling to do this and haven't quite got my head around how the whole queue system works with jquery.</p>

<p>I know I can put something like :</p>

<pre><code>delay(life).animate({opacity:0},5000)
</code></pre>

<p>in there, but then it holds up the whole function. </p>

<p>How would you tackle something like this?</p>
