1

So, I am familiar with the fact that you cannot use a callback function on jQuery's .css function. Instead, I used the setTimeout function:

$('#header-nav').css({'left': leftBstr});

posBstr = '.level' + posB.toString();
setTimeout(function(e){
    $('#header-nav ul' + posBstr).removeClass('menu-active');
}, 300);

This code is meant for a mobile menu animation. There are two typed of buttons:

  • go further into the menu (child categories)
  • go back (parent category)

But, when using the setTimeout function, when I click too fast, the menu disappears, because of the removed class menu-active.

I already tried putting the setTimeout function inside a var, and use the clearTimeout function, but that did not work.

My question: is there another way to recreate the callback function on the .css function, without using setTimeout?

Maarten Wolfsen
  • 1,625
  • 3
  • 19
  • 35

1 Answers1

1

You can try to use the promise

The .promise() method returns a dynamically generated Promise that is resolved once all actions of a certain type bound to the collection, queued or not, have ended.

$('.element').css("color","yellow").promise().done(function(){
    alert( 'color is yellow!' );
});
Mohit Tanwani
  • 6,608
  • 2
  • 14
  • 32
  • You should also mention about the browser support of promises.. http://caniuse.com/#feat=promises – Mauno Vähä Sep 26 '16 at 14:16
  • Works very good, but the problem is that the .css('left') animation takes 300 ms to complete. I have tried to add .delay(300) to the .removeClass(), but that did not work. Do you know a solution to that? – Maarten Wolfsen Sep 26 '16 at 14:18
  • You can actually bind transition end in js for the element then remove it once you are done with it. But for what you are trying to do, it is much better to use `.animate` – Huangism Sep 26 '16 at 14:22
  • @Huangism tried .animate, but for some reason it gave the animation a delay, and it looked not very smooth. How do I bind these transitions? – Maarten Wolfsen Sep 26 '16 at 14:23
  • `delay` is for animations. Just to a 300ms timeout in the `done` function. That should do the trick @MaartenWolfsen – eisbehr Sep 26 '16 at 14:23
  • Can you try with $('#header-nav ul' + posBstr).delay(1000).removeClass('menu-active'); ? – Mohit Tanwani Sep 26 '16 at 14:23
  • @eisbehr Placing the setTimeout in the .done() function still results in same problem I was having in the beginning – Maarten Wolfsen Sep 26 '16 at 14:26
  • @Loading.. .delay() does not seem to work on removeClass() – Maarten Wolfsen Sep 26 '16 at 14:27
  • You can try to use queue for the same, if possible. Like this way $("#div").addClass("error").delay(1000).queue(function(){ $(this).removeClass("error").dequeue(); }); – Mohit Tanwani Sep 26 '16 at 14:28
  • Try this or even $('.cellcontent').animate({ left: '-=190'}, { easing: alert('start ani') }, duration).promise().done(function () { alert('end animation'); }); – Mohit Tanwani Sep 26 '16 at 14:30
  • Or can you create a jsfiddle to check the exact problem ? – Mohit Tanwani Sep 26 '16 at 14:30
  • @Loading.. it's quite hard to recreate the exact same fiddle, as I cannot share the actual code, because of my internship. I'll try to make something – Maarten Wolfsen Sep 26 '16 at 14:40