jQueryのホバーアニメーション：不透明度と背景位置を同時にアニメーション化できない - jquery、html、css

ナビゲーション要素をアニメーション化して、要素の上にマウスを移動すると、完全に不透明になり（不透明度30％から）、背景画像が10ピクセルずつ上に移動します。これは私のコードです。

<script type="text/javascript">
$(document).ready(function(){
$("#topnav li")
.mouseover(function(){
$(this).stop().animate(
{"background-position-y": "28px"},
{opacity: 1},
{duration:100})
})
.mouseout(function(){
$(this).stop().animate(
{"background-position-y": "38px"},
{opacity: 0.3},
{duration:100})
})
});
</script>

ただし、実際にリストされている最初のアニメーションのみ遊ぶ。書かれているように、背景の位置はアニメーションしますが、不透明度はアニメーションしません。不透明度と背景の位置のアニメーションを切り替えると、不透明度はアニメーション化されますが、背景の位置はアニメーション化されません。私はjQueryにはあまり向いていませんが、読んだことから、これはうまくいくようです。誰かが私が間違っていることを理解するのを助けることができますか？

回答：

複数のプロパティをアニメーション化するために、正しい形式の引数を使用していません。すべてのプロパティは、最初の引数として渡されるオブジェクトに属します。これは、 jQueryのドキュメント .animate().

<script type="text/javascript">
$(document).ready(function(){
$("#topnav li")
.mouseover(function(){
$(this).stop(true).animate(
{"background-position-y": "28px", opacity: 1},
{duration:100})
});
.mouseout(function(){
$(this).stop(true).animate(
{"background-position-y": "38px", opacity: 0.3},
{duration:100})
});
});
</script>

参考までに、あなたもおそらく欲しい .stop(true) 前のアニメーションをキューから削除します。

ご覧のように ここに、 property CSSプロパティのマップであり、 duration 2番目のパラメーターです。

$(this).stop().animate({
"background-position-y": "28px",
"opacity": 1
}, 100)