web-dev-qa-db-ja.com

jQueryはパディングをゼロにアニメーション化します

ホバー時にパディングを切り替える次のスニペットがあります（例 ここ を参照）。

<div id="outer"><div id="inner"></div></div> 
<script> 
  $("#inner").mouseenter(function () {
    $("#outer").animate({ 'padding' : '20px' }, "slow");
  });
  $("#inner").mouseleave(function () {
    $("#outer").animate({ 'padding' : '0px' }, "slow");
  });
</script>

目標は、パディングをインとアウトの両方でアニメーション化することですが、現在、アニメーション化するアニメーションは表示されません。いくつかのテストを行いました。リーブパディングを（0ピクセルから）10ピクセルに変更すると、アニメーションが実行されますが、ゼロから始まり、外側にアニメーション化されます。 jQuery1.4.3を実行しています。これを修正する方法はありますか？

jqueryjquery-1.4
16
Kevin Sylvestre

間違いなく1.4.3のアニメーションのバグですが、今のところ、次のように個々のプロパティをアニメーション化することで回避できます。

$("#inner").mouseleave(function () {
  $("#outer").animate({ 
    'padding-top' : 0,
    'padding-right' : 0,
    'padding-bottom' : 0,
    'padding-left' : 0,
  }, "slow");
});

ここでテストできます 。

29
Nick Craver

1.4.3のバグのようです（css部分を書き直しました）。 1.4.2は正常に機能します：

http://www.jsfiddle.net/YjC6y/44/

私はそれをさらに調査し、この投稿を更新します。

5
jAndy

別の解決策は、cssHookを使用することです。 Brandon Aarons jquery-cssHooks 頭に浮かぶ（この場合、marginpadding.jsのpaddingフック）

ここでテストできます

1
jitter

Jqueryがアニメーション内のハイフン「-」にうまく反応しないことに気づきましたが、ハイフンに乗って後の最初の文字を大文字にすることで同じ結果が得られます。したがって、次のようなものがあります。

    $("#inner").mouseleave(function () {
       $("#outer").animate({
     paddingTop : 0,
         paddingRight : 0,
         paddingBottom : 0,
         paddingLeft : 0,
         borderLeftWidth: 0,
         borderTopWidth: 0,
         borderRightWidth: 0,
         borderBottomWidth: 0,

 }, slow);
0
Adam Boostani