CODEWITHSUNDEEP
javascriptjqueryhtmlcsstoggle
Otis Wright
Otis Wright

Reputation: 2110

jQuery toggle delay as well as classes and fade

So I have the following code:

$('[data-hook="chat"]').click(function () {
        $('[data-hook="case"]').toggleClass('col-sm-12 col-sm-9');
        $('.chat').delay(500).fadeToggle('slow');
});

Which works really well when it is applying the col-sm-9 class then fading in the chat (Note this is a CSS width transition on the col-sm-12 element hence the 500ms delay on the jQuery fadeToggle()). My question is can I cleanly reverse this so when fading out and re-applying col-sm-12 the delay is applied to the toggleClass() and the fadeToggle is instant?

Cheers, Otis.

Upvotes: 1

Views: 149

Answers (2)

dmlittle
dmlittle

Reputation: 999

What's preventing you from doing the opposite?

$('[data-hook="case"]').delay(500).toggleClass('col-sm-12 col-sm-9');
$('.chat').fadeToggle('slow');

Upvotes: 1

Philip Dernovoy
Philip Dernovoy

Reputation: 1179

See fadeToggle() description and then you can do it like this:

$('.chat').fadeToggle('slow', 'swing', function() {
    $('[data-hook="case"]').delay(500).toggleClass('col-sm-12 col-sm-9');
});

UPDATE:
You can use toggle():

$('[data-hook="chat"]').toggle(function() {
    $('[data-hook="case"]').toggleClass('col-sm-12 col-sm-9');
    $('.chat').delay(500).fadeToggle('slow');
}, function() {
    $('.chat').fadeToggle('slow', 'swing', function() {
        $('[data-hook="case"]').delay(500).toggleClass('col-sm-12 col-sm-9');
    });
});

Upvotes: 1

Related Questions