Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 645
  • Last Modified:

Jquery slideDown/slideUp queue issue...

hey guys and gals,
I am having some trouble with some of my jquery code.  All of the 'slide' will stack up instead of disappearing (.hide()) like I want them to.

Here is a link to the code on jsFiddle: http://jsfiddle.net/2TGXB/3/
I will post the code here too:
Css:
.button{
    display: block;
    width: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;  
    background-color: #FF0000;
}

#buttonContainer{
    display: block;
    float: left;
    width: 50px;   
}

#slideContainer{
    display: block;
    float: left;
    width: 200px;  
    background-color: #666666;
    margin-top: 10px;
    margin-left: 5px;
}
#slideOne{
 display: none;
 background-color: white;   
}
#slideTwo{
 display: none;
 background-color: Red;  
}
#slideThree{
 display: none;
 background-color: Blue;  
}

Open in new window

HTML:
<div id="buttonContainer">
    <div id="One" class="button">One</div>
    <div id="Two" class="button">Two</div>
    <div id="Three" class="button">Three</div>
</div>

<div id="slideContainer">
    <div id="slideOne">Slide One</div>
    <div id="slideTwo">Slide Two</div>
    <div id="slideThree">Slide Three</div>
</div>

Open in new window


Jquery:
$(document).ready(function() {
    //match the height of the slideContainer with the button container - bottom padding
    var containerHeight = $('#buttonContainer').height() -10;
    $('#slideContainer').css("height", containerHeight);
   
    //Set up the hover
    $('#buttonContainer div').hover(
        function() {
            $(this).css("backgroundColor", "#CCCCCC");
            $(this).css("cursor", "pointer");
        },
        function() {
            $(this).css("backgroundColor", "");
            $(this).css("cursor", "");
        }
    );
    
    //Set up the click
    $('#buttonContainer div').click(function() {
        //get the id of the clicked div
       var divID = $(this).attr("id");

        //hide any visible slides and remove class
       $('#slideContainer div.visibleSlide').hide().removeClass("visibleSlide");
    
        //slideDown the related slide and add class
        $('#slide'+divID).css("height", containerHeight).slideDown("slow").addClass("visibleSlide");
   
        //keep current slide visible for 3 seconds, then slide up
        $(".visibleSlide").delay(3000).slideUp("fast").removeClass("visibleSlide");
    });
});

Open in new window



if you click on the buttons fairly quickly you will see that they all hang around for the full 3 seconds, instead of hiding on the click.

How do I fix this?

Any help would be appreciated!
0
Slim81
Asked:
Slim81
1 Solution
 
crysallusCommented:
The problem is that the removeClass call after your delay method is being called instantly, which means that that class has been removed when the next button is clicked, so the call to hide the currently visible slide does nothing. The visibleSlide class has already been removed. The delay method only delays animation effects, such as slideUp, fadeIn etc. Not the call to removeClass.

I changed the code to this:

//Set up the click
    $('#buttonContainer div').click(function() {
        //get the id of the clicked div
        var divID = $(this).attr("id");
        
        //hide any visible slides and remove class
        $('.visibleSlide').stop(true, true).hide().removeClass("visibleSlide");

        //slideDown the related slide and add class
        $('#slide' + divID).addClass("visibleSlide").css("height", containerHeight).slideDown("slow");

        //keep current slide visible for 3 seconds, then slide up
        $(".visibleSlide").delay(3000).slideUp("fast", function(){$(this).removeClass("visibleSlide")});
    });

Open in new window

Adding the removeClass call to a callback function that executes once the slideUp animation is complete. That way if another button is clicked in the meantime, the visibleSlide class is still in place, and can then be hidden as you want.

There is one issue still with your code. The delay method can't be cancelled, which means that an old delay call sometimes interferes with the slide animations. If you click a few times quickly, you'll notice the odd automated slideup occurring more quickly than it should. The only way to fix this would be to use the javascript setTimeout function. That returns a timeout id which you can then use to cancel it. Something that can't be done with jQuery's delay.

Let me know if you need help with that.
0
 
Slim81Author Commented:
Brilliant.

I knew that the JQuery's .delay only worked for animations, but for some reason I assumed it would work because it was chained.

You rock.  Thanks for the answer and the lesson.

-Slim
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now