jQuery UI拖放效果和框大小

我想动画的切换与jQuery UI的drop效果的框。此框中应用了box-sizing: border-box，这似乎导致了一些问题。jQuery UI拖放效果和框大小

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

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。

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

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

来源

2013-03-01 scferg5

边界框似乎没有视觉上增加任何价值。你为什么使用它？ – Brad 2013-03-01 04:14:34

我将要使用很多百分比的宽度和高度，并且向这些添加填充将会是一种痛苦。 – scferg5 2013-03-01 04:24:06

我一直有与“.show”类似的问题。看起来，jquery忽略了框大小，直到它完成了效果。 – 2013-04-19 04:17:23

改为使用动画。我不知道为什么toggle无法正常工作，但确实如此。

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

好吧......您可能需要修补一下，但是您提出的错误是固定的。

编辑：忘了补充小提琴为例http://jsfiddle.net/4PJ5Z/

来源

2013-03-01 14:24:51 Brad

jQuery UI拖放效果和框大小

回答

相关问题