0

ボックスの切り替えをjQueryUIの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); 
});

これがフィドルです。

ボックスサイズを削除すると、うまくアニメーション化されます。

誰かがこれに問題があるかもしれないこととそれを回避する方法を知っていますか？

4

1 に答える 1

0

代わりにアニメーションを使用してください。なぜ機能しないのかわかりませtoggleんが、これは機能します。 

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

うーん...少しいじる必要があるかもしれませんが、あなたが提起したバグは修正されています。

編集:例のフィドルを追加するのを忘れましたhttp://jsfiddle.net/4PJ5Z/

于 2013-03-01T14:24:51.867 に答える