CODEWITHSUNDEEP
javascriptjquery
dopatraman
dopatraman

Reputation: 13908

how to remove a method with a callback or otherwise

I have the following code that animates an object with a delay of 800 ms:

$('#navMenu').mousemove(function (e) {
        thisX = e.pageX

        if (thisX >= 1625) {
            $('#prbBtnHolder').animate({ left: '-=150' }, 300).delay(800);
        }
});

If the #prbBtnHolder has a certain css left property i want to be able to remove the delay()method and stop the animation. How do i do this? This is what I've tried so far:

//...
$('#prbBtnHolder').animate({ left: '-=150' }, 300).delay(800);
if ($('#prbBtnHolder').css('left') < -100) {
     $(this).animate({left: '-=0px'});
}

But this does not remove the delay method nor does it achieve the desired effect. Any other ideas?

Upvotes: 0

Views: 188

Answers (2)

ScottE
ScottE

Reputation: 21630

In order to clear the effects queue, you'll need to use the step callback to see if your condition is met.

http://api.jquery.com/animate/

$('#prbBtnHolder').animate({
  left: '-=150'
},    
{
  duration: 300,
  step: function(now, fx) {
    if (now < -100) {
      // uncomment and you'll see the next animation
      $(fx.elem).clearQueue().stop();            
    }
  }
}).delay(800).animate({ width: '200px', height: '200px' }, 300);

Here is a jsbin example:

http://jsbin.com/utejew/3

Upvotes: 1

Sebastian Otto
Sebastian Otto

Reputation: 15279

$(this).clearQueue();
jQuery Docs for clearQueue

Removes all elements in the effect Queue for the given Element. Otherwise you could use js native setTimeoutfunction to animate which can easily be cleared with clearTimeout.

Before you Animate $('#prbBtnHolder') you can calculate how far the Button is away from -100 and animate it only that far.

Upvotes: 0

Related Questions