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

jquery animate unintended things css. when animating paddingleft, sets div display: none; that's unintended , can't figure out why 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 solve if interested: fixedfiddle

from docs:

in addition numeric values, each property can take strings 'show', 'hide', , 'toggle'. these shortcuts allow custom hiding , showing animations take account display type of element. in order use jquery's built-in toggle state tracking, 'toggle' keyword must consistently given value of property being animated.

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

if memory serves, , docs indicate, these shortcuts work literally "show" , "hide" element on animation start , complete. seem jquery takes account initial display , stores restore later. toggle macro of "show" , "hide" , seems function in same way.