jQuery delay() and toggle()

[GreatPotato]

Hello… Got a small jQuery question.

I have the following:

$(".form h3").click(function() {

$(this).siblings(".rightcol").slideToggle();

$(this).siblings(".leftcol").delay(500).fadeToggle();

});

or I could have the following (both do the same thing I guess):

$(".form h3").click(function() {

$(this).siblings(".rightcol").slideToggle(500, function() {

$(this).siblings(".leftcol").fadeToggle();

});

});

Which slides down the rightcol and then fades in the leftcol shortly after… Which looks beautiful when it shows. But when it hides, I don’t want the delay… Any help with that? I just need to set the delay only on fade in, and not on fade out…

[GreatPotato]

Figured it out… Basically just built my own toggle by test a variable to see if it was even when an element is clicked…

var delay = 0;



$(".form h3").click(function() {

delay++;



if(delay%2 == 0) {

$(this).siblings(".rightcol").delay(500).slideUp();

$(this).siblings(".leftcol").fadeOut();

} else {

$(this).siblings(".rightcol").slideDown();

$(this).siblings(".leftcol").delay(500).fadeIn();

}

});

[Chris Coyier]

I might do this for readability and semantics

var $el;



$(".form h3").click(function() {



$el = $(this);

$el.data('closed', false);



if ($el.data('closed')) {

$el

.siblings(".rightcol")

.delay(500)

.slideUp()

.end()

.siblings(".leftcol")

.fadeOut()

.end()

.data('closed', true);



} else {

$el

.siblings(".rightcol")

.slideDown()

.end()

.siblings(".leftcol")

.delay(500)

.fadeIn()

.end()

.data('closed', false);

};



});

[GreatPotato]

Interesting… Will experiment further.

I have the required effect and it looks awesome, but always nice to be able to tweek it.

Thanks for the help, Chris!

[Author]

Posts