Forums

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

Rugg

Hmm…that didn't seem to quite work

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.

Rugg

Here is the HTML…

<div id="panel">
<div id="info">
<div class="one-third">
		<h1>One Third.</h1>
	</div>
				
	<div class="one-third">
		<h5>One Third</h5>
		<p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna.</p>
	</div>
					
	<div class="one-third last">
		<h5>One Third</h5>
		<p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna.</p>	
	</div>
</div>
</div>
<p class="slide"><a href="#" class="btn-slide"></a></p>

Here is the JS…

$(document).ready(function(){
	$(".btn-slide").click(function(){
		$("#panel").slideToggle(500);
		$(this).toggleClass("active"); return false;
	});
});

Rugg

This is essentially a hidden div that slides open like a drawer. My goal is to fade the content in/out when the drawer slides open/shut.

Here is an example of what I'm referencing:
http://www.formfiftyfive.com/

*click 'What the FFF?'

Thanks Mottie

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();

Rugg

Interesting…this seems to cause the content inside the div with the ID 'info' not visible at all.

Rugg

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

I tried removing that line. This is what happened:

The content was visible after open, and faded out after close for good. Any other time the drawer opened it was gone.

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.

Rugg

Hmm…that doesn't even allow the drawer to open anymore…

Mottie

It works for me... what browser are you using?

Rugg

Hey Mottie,

I actually figured it out. What I did was wrap the "document ready function" around that bit of code…that obviously was causing the issues.

I'm wondering though (forgive me please I am new with JS) why isn't the "document ready" bit needed?

Thanks for all your help/patience.

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".

Rugg

ahh…ok. Thank You very much.

treehouse : what would you like to learn today?

Forums

Jquery fade/toggle only works on first click…