最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery + Stop + Callback Functions - Stack Overflow

programmeradmin1浏览0评论

From what I understand using .stop() will prevent the callback functions to fire, right?

Unfortunately, it seems that this does not work in my current script:

newSubMenu.stop().slideToggle(250, function() {
  newSubMenu.css('visibility', 'visible').addClass('open');
});

The animation now stops when double clicking, but newSubMenu still gets the class open and I cant figure out why.

The goal I am trying to achieve, is to NOT apply the class open until the animation is plete.

From what I understand using .stop() will prevent the callback functions to fire, right?

Unfortunately, it seems that this does not work in my current script:

newSubMenu.stop().slideToggle(250, function() {
  newSubMenu.css('visibility', 'visible').addClass('open');
});

The animation now stops when double clicking, but newSubMenu still gets the class open and I cant figure out why.

The goal I am trying to achieve, is to NOT apply the class open until the animation is plete.

Share Improve this question edited Feb 4, 2014 at 19:09 tshepang 12.5k25 gold badges97 silver badges139 bronze badges asked Dec 1, 2011 at 14:29 r0skarr0skar 8,70614 gold badges52 silver badges70 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 5

From the documentation:

When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. … Callback functions are not called.

Callback functions are called if the third argument to stop() is true.

In the code you provide, though, the callback will run because you're stopping already running animations, not the slideToggle() animation which has yet to run when stop() is called.

Here is a working example showing the callback being stopped.

.stop() can be used to stop currently running animations. Once the animation has been pleted the callback will be executed. In order to stop the current animation and avoid the callback being called you need to do something like this;

newSubMenu.mouseover(function(){
    newSubMenu.slideToggle(250, function(){
        $(this).css('visibility', 'visible').addClass('open');
    });
}).dblclick(function(){

    // this will stop the execution of the .slideToggle animation
    // whitch will prevent the callback from being executed
    newSubMenu.stop();

});

jsFiddle example

To see why this happens, you have to understand, what toggle does. Everytime you click, the slideToggle gets itself the information to slideDown or slideUp.

The conclusion is: everytime the toggle is plete, your function will be called and your newSubMenu gets the visibility:visible style, plus the class "open" if it doesn't exist.

Click-> Stop all animations on element -> toggle slide -> call/excecute function

jQuery has added an "always" callback in version 1.8:

always

Type: Function( Promise animation, Boolean jumpedToEnd )

A function to be called when the animation pletes or stops without pleting (its Promise object is either resolved or rejected). (version added: 1.8)

URL: http://api.jquery./animate/

This will be fired always, if an animation is regularly done or if you interupt it with stop().

发布评论

评论列表(0)

  1. 暂无评论