slideUp(), slideDown, show() and hide() not animating

Question

I have used the following code for making accordion inside ul-li :

$(document).ready(function(){
    var rr = true;
        $('ul.side > li.first-level > ul').hide();

        $('ul.side > li.first-level').click(function(){

            if(rr===true){
            $(this).children('ul').slideDown(150);
            rr = false;
            }

            else{
            $(this).children('ul').slideUp(150);
            rr = true;

            }

        });

    });

The problem is that the show-hide or slideUp-slideDown is working to show or hide the content, but nor animating as it should. Intead, i found that the more you increase the value or slideUp-down show-hide, the more delay it has in getting the elements show or hide. I found somewhere in this site a question, where he was having the same problem, but the answers told him to not to use tbody. i amusing ul-li. I even tried enclosing the ul-to be shown or hidden under a div, but it was the same. Here is the fiddle: http://jsfiddle.net/xCHCF/ . Thanks in advance.

I think you have the same problem as this question: [jQuery slideUp/slideDown animation](http://stackoverflow.com/questions/6917248/jquery-slideup-slidedown-functions-not-animating). — Tom Spee, Apr 03 '14 at 08:12
No, @speetje33, that link is got to do with tbody, i saw it before asking — user3450590, Apr 03 '14 at 09:30

reyaner · Answer 1 · 2014-04-03T11:38:46.707

Its a CSS problem, you cant float the <a>, you have to set it block:

ul.side a {
    border-bottom: 1px solid #494949;
    color: #000000;
    /* float : left; */
    display: block; <--
    padding: 15px 3%;
    text-align: right;
    text-decoration: none;
    width: 94%;
}

And for the jquery part you could do it like this:

$('ul.side > li.first-level > ul').hide();
$('ul.side > li.first-level').click(function(){
    $(this).children('ul').slideToggle(250);
});

Here the jsFiddle: http://jsfiddle.net/SfKR4/

Explanation why this happens, due a comment.

The animation is happing, you just can't see it, until its done!

The reason why its simple: The magic of “overflow: hidden” read this: http://colinaarts.com/articles/the-magic-of-overflow-hidden/ for more details about this effect!

When the <ul> starts to animate, jquery sets an overflow:hidden; on it, and starts to animate the height form 0 to his acctual height, when the heigth is reached, the overflow:hidden; is removed and the <ul> get's under the <a>.

Set in your fiddle, the width of the <a> to 50% and you will se excatly what is happening! Here it goes: http://jsfiddle.net/BEtU2/

Removing the float, and setting to display:block; removes the magic of overflow:hidden; and the <ul> its from the beginning under the <a>.

Hope it helps.

thanks, @reyaner, but pls explain what removing float left or adding display block has got to do with not animating? — user3450590, Apr 03 '14 at 09:31

slideUp(), slideDown, show() and hide() not animating

1 Answers1