Jquery fade/toggle only works on first click…

[Rugg]

Hello all!

I am using this bit of code to slide open a div with the content hidden initially. My goal is to have the content fade in after the div slides open…it does, however only on the first opening click. Any other time the fade fails to occur. ANy ideas or help is much appreciated.

$(document).ready(function(){



$(".btn-slide").click(function(){

$("#panel").slideToggle(600);

$(this).toggleClass("active"); return false;

});

$('#panel').stop().animate({ height: '300px'}, 1000, "linear", function() {

$('.one-third').fadeIn(1000);

});

});

Thanks!

[Mottie]

I think you need to move the callback to the slideToggle function, but I don’t know what your HTML looks like… so try this:

$(document).ready(function(){

$(".btn-slide").click(function(){

$("#panel").slideToggle(600, function() {

$('.one-third').fadeIn(1000);

});

$(this).toggleClass("active");

return false;

});

});

[Mottie]

It would help if you shared some HTML so it is easier to tell what each of the css classes are and maybe explain what you are trying to accomplish.

[Mottie]

Ok, try this (demo):

$(".btn-slide").click(function() {

if ( !$('#info').is(':hidden') ) {

$('#info').fadeOut(1000);

}

$("#panel").slideToggle(1000, function(){

if (!$(this).is(':hidden')) {

$(this).fadeIn(1500);

}

});

$(this).toggleClass("active");

return false;

});



$('#panel,#info').hide();

[Mottie]

Hmm, ok try this:

var ht = $('#panel').height();

$('#panel').height(0);

$('#info').hide();



$(".btn-slide").click(function() {

var d = $('#info').is(':hidden');

if (!d) { $('#info').fadeOut(200); }

$('#panel').animate({ height: (d) ? ht : 0 }, 500, function(){

$('#info')[(d) ? 'fadeIn' : 'fadeOut']();

});

$(this).toggleClass("active");

return false;

});

I changed it from slideToggle because adding a callback seemed to fast-forward the slidedown animation.

[Mottie]

It works for me… what browser are you using?

[Mottie]

The document ready is built into jsFiddle… you can set the select box in the top right corner to “onDomReady” to use document ready, “onLoad” for window load or disable it using the “no wrap”.

[Author]

Posts