jQuery UI 下拉效果和框大小调整

Question

我正在尝试使用 jQuery UI 的 drop 效果为框的切换设置动画。此框应用了 box-sizing: border-box，这似乎导致了一些效果问题。

当盒子动画时，它的宽度和高度会减少，就像它失去了它包含的填充一样。

HTML

<button>Toggle</button>
<div id="box">
    <p>Some content</p>
</div>

CSS

#box{
    width: 100%;
    height: 200px;
    padding: 20px;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin-top: -100px;
    background: #ccc;
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

JS

$("button").click(function(){
    $("#box").toggle("drop", {direction: "up"}, 400); 
});

这是一个 fiddle .

如果我删除 box-sizing，它的动画效果就很好。

有谁知道这可能是什么问题以及如何解决它？

Answer 1

改用动画。我不确定为什么 toggle 不起作用，但确实如此。

$("button").click(function(){
   $("#box").animate({
    opacity: 0.25,
    right: '+=50',
    height: 'toggle'
  }, 400);
});

好吧...您可能需要稍微修改一下，但您提出的错误已修复。

编辑:忘记为示例添加 fiddle http://jsfiddle.net/4PJ5Z/