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

来自文档：

除了数字值之外，每个属性都可以使用字符串＆＃39; show＆＃39;，＆＃39; hide＆＃39;以及＆＃39; toggle＆＃39;。这些快捷方式允许自定义隐藏和显示动画，并考虑元素的显示类型。为了使用jQuery的内置切换状态跟踪，＆＃39;切换＆＃39;必须始终将关键字指定为要设置动画的属性的值。

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

如果我的记忆服务，并且正如文档所示，这些快捷方式可以做更多的工作，直接显示＆＃34;显示＆＃34;并且＆＃34;隐藏＆＃34;动画元素开始并完成。看起来jquery会考虑初始显示，然后存储以便稍后恢复它。切换只是＆＃34;显示＆＃34;的一个宏。并且＆＃34;隐藏＆＃34;似乎以同样的方式运作。

为什么jQuery动画设置我的div显示：none？

1 个答案: