Grow your CSS skills. Land your dream job.

Jquery fade/toggle only works on first click…

  • # July 14, 2011 at 4:32 pm

    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

    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;
    });
    });
    # July 15, 2011 at 6:25 am

    Hmm…that didn’t seem to quite work

    # July 15, 2011 at 9:32 am

    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.

    # July 15, 2011 at 11:05 am

    Here is the HTML…











    Here is the JS…

    $(document).ready(function(){
    $(".btn-slide").click(function(){
    $("#panel").slideToggle(500);
    $(this).toggleClass("active"); return false;
    });
    });
    # July 15, 2011 at 11:08 am

    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

    # July 15, 2011 at 3:07 pm

    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();
    # July 15, 2011 at 3:24 pm

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

    # July 15, 2011 at 3:29 pm
    $('#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.

    # July 15, 2011 at 7:12 pm

    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.

    # July 15, 2011 at 7:59 pm

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

    # July 15, 2011 at 9:00 pm

    It works for me… what browser are you using?

    # July 18, 2011 at 5:32 pm

    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.

    # July 18, 2011 at 11:52 pm

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

    # July 20, 2011 at 2:34 pm

    ahh…ok. Thank You very much.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".