Callback on .css function

Question

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?

Maybe use .animate, therefore animate it using JS rather than css classes? — evolutionxbox
– evolutionxbox, Commented Sep 26, 2016 at 14:15
Hmm, I can try that. But I would also love to find a solution to a callback replacer for other situations :) — Maarten Wolfsen
– Maarten Wolfsen, Commented Sep 26, 2016 at 14:20
@MaartenWolfsen for binding transition end see stackoverflow.com/questions/9255279/… — Huangism
– Huangism, Commented Sep 26, 2016 at 14:23

Mohit Tanwani · Accepted Answer · 2016-09-26 14:15:15Z

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!' );
});

answered Sep 26, 2016 at 14:15

Mohit Tanwani

6,6382 gold badges16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Mauno Vähä Over a year ago

You should also mention about the browser support of promises.. caniuse.com/#feat=promises

Maarten Wolfsen Over a year ago

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?

Huangism Over a year ago

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

Maarten Wolfsen Over a year ago

@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?

eisbehr Over a year ago

delay is for animations. Just to a 300ms timeout in the done function. That should do the trick @MaartenWolfsen

|

Collectives™ on Stack Overflow

Callback on .css function

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related