0

バナーのドロップダウンメニューに次のCSSがあります。

#nav-menu li a
{
    background-image:url('../images/menu_background.png');  
    background-repeat:repeat-x;
    background-position: left top;
    height: 35px;
}


#nav-menu li a:hover
{
    background-image:url('../images/menu_background_hover.png');  
    background-repeat:repeat-x;
    background-position: left top;
    height: 35px;

}

<li>タグにカーソルを合わせたときにアニメーション効果が必要な場合を除いて、正常に機能します。現在、<li>カーソルを合わせると、の背景色が置き換えられます。

liタグの左マージンを変更する以下のサンプルコードを試しましたが、ホバー時にcss遷移をアニメーション化する方法がわかりません。

$j(document).ready(function () {

    //When mouse rolls over
    $j("#nav-menu li").hover(function () {

        $j(this).filter(':not(:animated)').animate({
            marginLeft: '9px'
        }, 'slow');
    },

    function () {
        $j(this).animate({
            marginLeft: '0px'
        }, 'slow');
    });

});

提案をありがとうございました。

4

2 に答える 2

1

この投稿からの引用、

Blockquote 本物の背景画像を使用するのではなく、位置を使用して配置された画像を含む div 要素を使用して、これを回避する必要があると思います: 絶対 (または固定) およびスタッキング用の z-index。次に、これらの div をアニメーション化します。引用符

于 2012-09-05T14:32:12.430 に答える
0

変数名のj後にを削除することで、これを機能させました。$

フィドル: http://jsfiddle.net/XjxBj/

$(document).ready(function () {
    //When mouse rolls over
    $("#nav-menu li").hover(function () {
        $(this).filter(':not(:animated)').animate({
            marginLeft: '9px'
        }, 'slow');
    },

    function () {
        $(this).animate({
            marginLeft: '0px'
        }, 'slow');
    });
});​
于 2012-09-05T14:37:10.307 に答える