Question

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 complete.

Answer 1

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.