javascript - 为什么 jQuery animate 将我的 div 设置为显示 : none?

Question

jQuery Animate 对我的 CSS 做了意想不到的事情。为 paddingLeft 设置动画时，它会将 div 设置为 display: none；那是无意的，我不明白为什么会那样做。 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>

已解决:如果有人感兴趣，这是一个解决方案:FixedFiddle

Answer 1

来自文档:

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/

如果我没有记错的话，正如文档所指出的，这些快捷方式会做额外的工作，以字面意思“显示”和“隐藏”动画开始和完成时的元素。 jquery 似乎考虑了初始显示，然后存储它以便稍后恢复它。 Toggle 只是“显示”和“隐藏”的一个宏，似乎功能相同。