0

こんにちは、これはスタックオーバーフローに対する私の最初の正当な質問です。社会政策を台無しにしてしまった場合はご容赦ください。私は Jquery に取り組んでおり、これらのプラグインを使用しています。

    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.color-2.1.0.min.js"></script>

コードのこのセクションを機能させるには:

$(document).ready(function () {
    var timeout;
    $('.twitter').hover(

    function () {
        timeout = setTimeout(

        function () {
            $('body').animate({
                "background-color": "#dd4b39"
            }, 400);
        },

        function () {
            $('body').animate({
                "background-color": "#000000"
            }, 400);
            clearTimeout(timeout);
        });
    });
});

ここにJSFiddleがあります

このコードは、ホバー効果をアクティブにし、div を柔らかい赤に変更しますが、マウスを div から離しても、div を真っ黒に変更しません。このオンラインのほとんどの例は、非常によく似たアプローチを示唆しているため、どこでこれを汚したのか興味があります。

編集 2013 年 8 月 27 日 18:28 EST

履歴が必要になると思います。元のコードは非常に単純な関数でしたが、次のアニメーションに移る前にアニメーション関数のキューを構築するという問題がありました。

例を次に示します (マウスを 2 つの div の間ですばやく移動します)。

$(document).ready(function(){
    $('.twitter').hover(
        function() {$('body').animate({"background-color":"#00aced"}, 400);},
        function() {$('body').animate({"background-color":"#232323"}, 400);}
    );
    $('.facebook').hover(
        function() {$('body').animate({"background-color":"#3b5998"}, 400);},
        function() {$('body').animate({"background-color":"#232323"}, 400);}
    );
});

新しいホバー機能を開始した場合、前のホバー機能のアニメーションを停止するタイムアウト機能を正しく構築し、アニメーションの構築を妨げたと思いました。

4

2 に答える 2

0

stop()アニメーション キューの構築を停止するには、次の呼び出しの前に次の呼び出しを行う必要がありますanimate()。

$('.twitter').hover(
    function() {$('body').stop().animate({"background-color":"#00aced"}, 400);},
    function() {$('body').stop().animate({"background-color":"#232323"}, 400);}
);

更新されたフィドル

于 2013-08-27T22:59:37.663 に答える
0

そこで何をしようとしているのかよくわかりませんがsetTimeout、間違った位置にあります。oneと onehoverの 2 つの関数を受け入れます。したがって、次の行にあるはずです：mouseovermouseout

$(document).ready(function () {
    $('.twitter').hover(
        function () {
            $('body').animate({
                "background-color": "#dd4b39"
            }, 400);
        },

        function () {
            $('body').animate({
                "background-color": "#000000"
            }, 400);
        }
    );
});

やりたかったことがsetTimeout遅延を作成することだった場合は、関数delayの前に追加できます。animate$('body').delay(1000).animate(....

詳細については、 http hover: //api.jquery.com/hover/を参照してください。

于 2013-08-27T22:04:49.950 に答える