Question

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.

For example, my function is so far:

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);
        }

    });


}

Therefore if I were to run:

parachute_drop('#parachute1',100000);

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.

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

I know I can put something like :

delay(life).animate({opacity:0},5000)

in there, but then it holds up the whole function.

How would you tackle something like this?

Answer 1

You can use the step function to update the transparency while the animation proceeds. Here’s an example: http://jsfiddle.net/imsky/qaLVS/

Given the following HTML and CSS:

<img src="http://placekitten.com/300/300" id="box">

#box {position:absolute;top:10px;left:20px}

The following jQuery code updates the opacity as soon as the 3/4ths threshold is crossed:

$(function() {
    var h = $(window).height();
    var t = function() {
        return h - (+$("#box").offset().top)
    };
    $("#box").animate({
        "top": h + "px"
    }, {
        duration: 5000,
        step: function() {
            if(t()/h < 0.75){
            $(this).css("opacity",(t()/(h*0.75)));
            }
            }
        });
    });

You can also trigger a one-time animation and attempt to get the animations’ timings to match up if the step-function approach is too choppy: http://jsfiddle.net/imsky/qaLVS/1/

$(function() {
    var h = $(window).height();
    var t = function() {
        return h - (+$("#box").offset().top)
    };
    $("#box").one("fade", function() {
        $(this).animate({
            "opacity": 0
        }, {
            "queue": false,
            "duration": 0.75 * 5000
        });
    });
    $("#box").animate({
        "top": h + "px"
    }, {
        duration: 5000,
        step: function() {
            if (t() / h < 0.75) {
                $(this).trigger("fade");
            }
        }
    });
});