0

さて、コードがすべきことは、li タグの背景色を変更することです。ただし、アニメーションで行う必要があります。つまり、背景色がすぐに変更されるべきではありません。背景色は、数秒かけて徐々に設定する必要があります。

私はこれを書いていますが、背景色をうまく設定していますが、徐々にではありません:

// Subtle navigation on hover color animation

$(document).ready(function () {
    $(".navigation li").hover(

    function () {
        // Over
        $(this).animate(
        $(this).css("background", "rgba(159,223,188, 0.9)"),
        300);
    },

    function () {
        // Out            
        $(this).animate(
        $(this).css("background", "none"),
        300);
    }

    );
});

html は非常に単純です。

<ul class="navigation">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

正しい方向への指針をありがとう！

4

3 に答える 3

3

JavaScript ソリューションに固執したい場合は、カラー アニメーション プラグインをご覧ください。

または、CSS3 トランジションを使用することをお勧めします。JavaScript も必要ありません。

li {
    background-color: rgba(159,223,188, 0.9);
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -ms-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
    transition: background-color 0.3s linear;
}

li:hover {
    background-color: transparent;
}

デモ

購入前にお試しください

于 2013-08-30T08:14:57.890 に答える
2

次のようにする必要があります。

$(document).ready(function () {
    $(".navigation li").hover(

    function () {
        // Over
        $(this).animate({
            background: 'rgba(159,223,188, 0.9)'
        }, 300);
    },

    function () {
        // Out            
        $(this).animate({
            background: 'none'
        }, 300);
    }

    );
});

は必要ありません。.css()スタイリングを.animate()関数に渡すだけです。複数の効果を渡すこともできます。

詳細については、こちらをご覧ください。

于 2013-08-30T08:15:04.070 に答える
0

これを試すこともできます：

次の CSS を 2 番目の関数に追加します。

            "background": "none",
            "transition-property": "background",
            "transition-duration": "1s",
            "transition-timing-function": "linear"

以下のコードを確認してください

"transition-duration": "1s" の値を任意の秒に増やして、遅延を増やすことができます。

お役に立てれば

$(document).ready(function(){

    $(".navigation li").hover(

        function(){
            // Over
            $(this).animate(
                $(this).css("background","rgba(159,223,188, 0.9)"), 
               300
            );
        },
        function(){
            // Out            
            $(this).animate(
                $(this).css(
                    {
                    "background": "none",
                    "transition-property": "background",
                    "transition-duration": "1s",
                    "transition-timing-function": "linear"
                    }

                ), 
                300
            );
        }

    );
});
于 2013-08-30T08:40:59.177 に答える