Home › Forums › JavaScript › Jquery fade/toggle only works on first click…
- This topic is empty.
-
AuthorPosts
-
July 14, 2011 at 4:32 pm #33502RuggParticipant
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!
July 14, 2011 at 7:49 pm #83181MottieMemberI 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;
});
});July 15, 2011 at 9:32 am #83141MottieMemberIt 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.
July 15, 2011 at 3:07 pm #83450MottieMemberOk, 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();July 15, 2011 at 7:12 pm #83467MottieMemberHmm, 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.
July 15, 2011 at 9:00 pm #83470MottieMemberIt works for me… what browser are you using?
July 18, 2011 at 11:52 pm #83607MottieMemberThe 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”.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.