CODEWITHSUNDEEP
javascriptjquerycss
dima qevanishvili
dima qevanishvili

Reputation: 13

Why is jQuery animate setting my div to display: none?

jQuery Animate does unintended things to my CSS. When animating paddingLeft, it sets div to display: none; that's unintended and I can't figure out why it does that. JSFiddle

<script>
    $("#menu-toggle").click(function(event){
        event.preventDefault();
        if($('#sidebar-wrapper').width() == 0){
            $("#sidebar-wrapper").animate({
                width: 'toggle'
            }, {
                duration: 600,
                queue: false,
                complete: function() { /* Animation complete */ }
            });$("#page-content-wrapper").animate({
                paddingLeft: 'toggle'
            }, {
                duration: 600,
                queue: false,
                complete: function() { /* Animation complete */ }
            });
        }else{
            $("#sidebar-wrapper").animate({
                width: 'toggle'
            }, {
                duration: 600,
                queue: false,
                complete: function() { /* Animation complete */ }
            });$("#page-content-wrapper").animate({
                paddingLeft: 'toggle'
            }, {
                duration: 600,
                queue: false,
                complete: function() { /* Animation complete */ }
            });
        }
    });
</script>

SOLVED: Here's a Solve if anyone is interested: FixedFiddle

Upvotes: 1

Views: 1009

Answers (1)

Aubricus
Aubricus

Reputation: 476

From the Docs:

In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element. In order to use jQuery's built-in toggle state tracking, the 'toggle' keyword must be consistently given as the value of the property being animated.

http://api.jquery.com/animate/

If my memory serves, and as the docs indicate, these shortcuts do extra work to literally "show" and "hide" the element on animation start and complete. It would seem jquery takes into account the initial display and then stores that to restore it later. Toggle is just a macro of "show" and "hide" and seems to function in the same way.

Upvotes: 1

Related Questions