1

このjqueryが機能しない理由を誰か教えてもらえますか?

次のようなリストがあります。

      <div id="services">
            <h1>Services</h1>
            <ul>
                <li class="menu"><a href="#">menu item1</a></li>
                <li class="menu"><a href="#">menu item2</a></li>
                <li class="menu"><a href="#">menu item3</a></li>
                <li class="menu"><a href="#">menu item4</a></li>
            </ul>
        </div>

そして、ホバー時に左から背景画像をスライドさせ、マウスアウト時に反転させたいです。

次の jquery コードは、moueover または mouseout で何も実行していません。ここで何が欠けていますか？

$(function(){       
    $('li.menu a').css( {backgroundPosition: "-416px 0"})
    .mouseover(function(){
        $(this).stop().animate({backgroundPosition:"(0px 0px)"}, 500)
    })
    .mouseout(function(){
        $(this).stop().animate({backgroundPosition:"(-416px 0)"}, 500)
    });
});
4

4 に答える 4

1

運が良ければ:)昨日同じ問題に遭遇しました。私と同じように、X 軸のアニメーションだけが必要です。

X 軸のデフォルトである backgroundPosition に 1 つのパラメータを渡すだけです。また、ピクセルのデフォルトである int も渡します。

$('li.menu a').css({
     backgroundPosition: -416
}).mouseover(function(){
     $(this).stop().animate({backgroundPosition: 0}, 500)
}).mouseout(function(){
     $(this).stop().animate({backgroundPosition: -416}, 500)
});
于 2012-06-05T12:14:52.403 に答える
1

背景の位置をアニメーション化することはできません。次のようなことができます。

$('li.menu a').css({
    opacity: 0.5,
    marginLeft: "-5px"
});

$('li.menu a').mouseover(function() {
    $(this).stop().animate({
        marginLeft: "0px",
        opacity: 1
    }, 500)
}).mouseout(function() {
    $(this).stop().animate({
        marginLeft: "-5px",
        opacity: 0.5
    }, 500)
});

ただのデモ

于 2012-06-05T11:41:09.880 に答える
0

これを試して、

$('li.menu a').css({background-position-x:"-416px",background-position-y:"0"}); 

$('li.menu a').mouseover(function(){
    $(this).stop().animate({background-position-x:"0",background-position-y:"0"}, 500)
})
.mouseout(function(){
    $(this).stop().animate({background-position-x:"-416px",background-position-y:"0"}, 500)
});
于 2012-06-05T12:06:02.137 に答える