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。

如果我删除了盒子大小，它就会动画很好。

有谁知道这个问题可能是什么以及如何绕过它？

Answer 1

使用animate代替。我不确定为什么toggle不起作用但这样做。

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

好吧......你可能不得不修补一下，但你提出的错误是固定的。

编辑：忘了添加一个例子http://jsfiddle.net/4PJ5Z/

的小提琴

jQuery UI drop效果和box-sizing

1 个答案: