CODEWITHSUNDEEP
jquery
A Bogus
A Bogus

Reputation: 3930

Jquery animate(), preventing animation

As part of a call to the jQuery animate function, sometimes I want to prevent the animation. Is there a way, as part of the animate function, to prevent the animation? Such as with a before property?

I would like to do something like this:

$('#myMovingDiv').animate(
{
    before: // RUN A FUNCTION, IF FUNCTION RETURNS TRUE, CANCEL ANIMATION
    left: '+=100'
}
, 1000, function(){});

To address the comments below, I cannot just do an if before the animate, because the animate changes the value of the if, and if the animate is not complete, the if condition is not met. Example -

//THIS WILL NOT WORK IF ANIMATION IS NOT FINISHED BEFORE 2ND CLICK
$("#myClickableDiv").click(function () {
    if (document.getElementById(myMovingDiv').offsetLeft == 0) {

       $('#myMovingDiv').animate({
           left: '+=850'
       }, 400, function () {
        // Animation complete.
       });

    };
});

Upvotes: 0

Views: 123

Answers (3)

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33880

I think it is a strange resquest since you can just do an if, but if you absolutly want a before option, put this script somewhere in you code:

(function($){
    $.fn.oldAnim = $.fn.animate;
    $.fn.animate = function(){
        var args = arguments;
        if(typeof args[1] == 'object'){
            if(args[1].before){
                var callBefore = args[1].before().apply(this);
                if(callBefore || callBefore == undefined){
                    return this.oldAnim.apply(this, args);
                }else{
                    return this;
                }
            }
        }
        return this.oldAnim.apply(this, args);
    }
})(jQuery)

Then you will have a before option. Returning false, 0, null or empty string will cancel the animation. However, returning undefined will trigger the animation.

You can call it like that :

$('selector').animate({'hegit' : 'value'}, {before : function(){}, complete : function(){} /*etc, etc*/})

Fiddle : http://jsfiddle.net/cWC5B/1/

Upvotes: 1

Dom
Dom

Reputation: 40491

Depends on what exactly you are trying to do. If it is a matter of preventing the property from being animated, in this case left, then you could use jQuery animate's step function.

$(function () {
    $('button').click(function () {
        $('#myMovingDiv').animate({
            left: '+=100'
        }, {
            step: function (now, fx) {
                if(parseInt(now) > 20){
                    $(this).stop(); 
                    fx.end = fx.start; //prevents div from moving
                }
            }
        },
        1000);
    });
});

DEMO: http://jsfiddle.net/qhzVm/3/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388406

I don't think it is possible like that, but you can develop a solution using .filter()

$('#myMovingDiv').filter(function(idx, el){
    return true;// or false based on condition
}).animate({
     left: '+=100'
 }, 1000, function () {});

Or why don't you put an if condition before the animate method is called

if(condition){
    $('#myMovingDiv').animate({
         left: '+=100'
     }, 1000, function () {});
}

Upvotes: 1

Related Questions