0

JQueryでバックグラウンドアニメーションメソッドを使用しようとしていますが、機能しません。これが私が使用しているコードです。

$(".menu_item").mouseenter(function(){$(this).animate({backgroundColor: "#FF8040"}, 'fast');});
$(".menu_item").mouseleave(function(){$(this).animate({backgroundColor: "#999"}, 'fast');});

どんな助けでもありがたいです。

残りはここにあります。

メニューのHTML：

<div id="menu">
    <a href="index.html" id="home_menu" class="menu_item">Home</a>
    <a href="index.html" class="menu_item">Tutorials</a>
    <a href="index.html" class="menu_item">News</a>
</div>

およびスクリプト：

<script type="text/javascript">
    $(document).ready(function(){

        jQuery().ready(function(){
            $(".menu_item").mouseenter(function(){$(this).animate({backgroundColor: "#FF8040"}, 'fast');});
            $(".menu_item").mouseleave(function(){$(this).animate({backgroundColor: "#999"}, 'fast');});

            var pos = $("#fixed_head").position();
            var height = $("#fixed_head").height();
            var height2 = $("#menu").height();

            var screenHeight = $("body").height();
            var newHeight = screenHeight - height - height2;
            $("#container").css("top", (pos.top + height));
            $("#container").css("height", newHeight);
            $("#content").css("height", newHeight);

            $(window).resize(function() {
                var pos = $("#fixed_head").position();
                var height = $("#fixed_head").height();
                var height2 = $("#menu").height();

                var screenHeight = $("body").height();
                var newHeight = screenHeight - height - height2;
                $("#container").css("top", (pos.top + height));
                $("#container").css("height", newHeight);
                $("#content").css("height", newHeight);
            });

        });

    });
    </script>

そして頭の中で：

<script type="text/javascript" src="jquery.js"></script>
4

3 に答える 3

1

jQuery UIライブラリを使用する場合、コードは機能するはずです。メソッドの色遷移効果がありanimateます。

それを書く別の方法は次のとおりです。

$(".menu_item").hover(function() {
    $(this).animate({
        backgroundColor: "#FF8040"
    }, 'fast');
}, function() {
    $(this).animate({
        backgroundColor: "#999"
    }, 'fast');
});​

デモ：http： //jsfiddle.net/kbKdY/

于 2012-05-28T21:31:15.740 に答える
1

jQuery UI 1.8.18ヘッドセクションのファイルが欠落していると思います。

例えば：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
于 2012-05-28T21:39:03.390 に答える
0

質問に対する直接的な回答ではありませんが、CSS トランジションを使用しないのはなぜですか?

それでも、jQuery を使用してマウス イベントのクラスを追加/削除できます。

CSS トランジションは高速 (JS アニメーションよりも高速) で、非常に信頼性があります。ブラウザが CSS トランジションをサポートしていない場合、背景色が変わります (ただし、アニメーション/トランジションはありません)。

ここのサンプルコード: http://jsfiddle.net/GuSQx/

于 2012-05-28T21:35:26.267 に答える