jquery - 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); 
});

这是一个小提琴。

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

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

Answer 1

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

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

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

编辑：忘记为示例添加小提琴http://jsfiddle.net/4PJ5Z/