jQuery UI 拖放效果和盒子大小答案

【问题标题】：jQuery UI drop effect and box-sizingjQuery UI 拖放效果和盒子大小
【发布时间】：2013-09-07 06:11:31
【问题描述】：

我正在尝试使用 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;
}

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

这是fiddle。

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

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

【问题讨论】：

border-box 似乎没有在视觉上增加任何价值。你为什么用它？
我将使用大量的百分比宽度和高度，否则会很痛苦。
我对“.show”也有类似的问题。看起来 jquery 会忽略 box-sizing 直到它完成效果。

标签： jquery jquery-ui css

【解决方案1】：

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

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

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

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

【讨论】：