1

ナビゲーション要素をアニメーション化して、マウスが要素の上に置かれると完全に不透明になり (30% の不透明度から)、背景画像が 10px 上に移動するようにしています。これは私のコードです：

<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があまり得意ではありませんが、私が読んだことから、これはうまくいくようです。誰かが私が間違っていることを理解するのを手伝ってくれますか?

4

2 に答える 2

1

複数のプロパティをアニメーション化するために、正しい形式の引数を使用していません。すべてのプロパティは、最初の引数として渡されるオブジェクトに属します。これは、 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)参考までに、おそらくキューから前のアニメーションを削除したいでしょう。

于 2012-09-12T03:26:54.347 に答える
0

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

$(this).stop().animate({
    'background-position-y': '28px',
    'opacity': 1
}, 100)
于 2012-09-12T03:30:24.733 に答える