Test case for jQuery Ticket 8227

stop specific animations

by jitter

HTML

<button id="start"> Start animation </button>
<button id="stop"> Stop height animation </button>
<pre id="log"></pre>
<div id="foo"></div>

CSS

#foo {
    position: absolute;
    top: 50px;
    width: 10px;
    height: 10px;
    border: 1px solid red;
}

JavaScript

var x = $("#foo"),
    l = $("#log"),
    stop = false;

function fn(fx, prop) {

    //stop height animation by external "event" -> if button was clicked
    if (stop && prop.prop === "height") {

        //stop animation. start == end means nothing to be done anymore
        prop.start = prop.end = prop.now;

        //if you just want to stop height and then don't anything else with the step callback
        //you can do the following to save a few cpu cycles
        //prop.options.step = null;

        stop = false;
        return;
    }

    //stop width animation automatically if more then half of the animation is done
    if (prop.state > 0.5 && prop.prop === "width") {
        prop.start = prop.end = prop.now;
    }

    //do some logging for fun
    if (prop.prop === "top") {
        l.text("width: " + x.width() + ", height: " + x.height() + ", top: " + x.offset().top);
    }
}

$("#start").bind("click", function() {
    x.animate({
        top: 200,
        width: 800,
        height: 800
    }, {
        duration: 5000,
        step: fn
    });
});

$("#stop").bind("click", function() {
    stop = true;
});