為什么jQuery設置我的div動畫以顯示：無？

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

從文檔中：

除了數值外，每個屬性還可以包含字符串“ show”，“ hide”和“ toggle”。 這些快捷方式允許自定義隱藏和顯示考慮到元素顯示類型的動畫。 為了使用jQuery的內置切換狀態跟蹤，必須始終將'toggle'關鍵字指定為要設置動畫的屬性的值。

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

如果我的記憶能夠發揮作用，並且如文檔所示，這些快捷鍵會做額外的工作以在動畫開始和完成時按實際方式“顯示”和“隱藏”元素。 看來jquery會考慮初始顯示，然后存儲該顯示以便以后恢復。 切換只是“顯示”和“隱藏”的宏，並且似乎以相同的方式起作用。