0

警告: 家の jquery/javascript 初心者。ここのチュートリアルを使用して、ホバー時に画像が前後に揺れるアニメーションを作成しました。

ただし、最初のホバー イベントの後、画像は 1 回だけ前後に移動しますが、最初のホバー イベントでは、5 回前後にスイングします (swings 変数で定義された回数)。ホバーイベントごとに同じ回数スイングしたい。

回転、スイング、スイングカウントの変数を変更してみました。また、振り子台の関数をスイング関数と一致させようとし、振り子のスイングの if/else ステートメントを変更しました。何も機能しません - 何が間違っていますか? コードは次のとおりです。

<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        var rotation = 5; 
        var initrotation = rotation;
        var swingtime = 603;
        var swings = 5;
        var swingcount = 0; 
        var startatcentre = true;

        if (startatcentre == true) {
            initrotation = 0;
        }
        $('#pendulum-child').mouseenter(function() {
            function init() {
                $('#pendulum-parent').animate({rotate: initrotation}, 0, function () {
                    $('#pendulum-parent').css("display", "block");
                    rotation *= -1;
                    swingcount++;
                    pendulumswing();                    
                });
            }

            function pendulumswing() {
                $('#pendulum-parent').animate({rotate: rotation},swingtime, "swing", function(){
                     rotation *= -1;                     
                     if (swingcount >= swings) {
                        pendulumrest(); 
                    } else {
                        swingcount++;
                        pendulumswing();                        
                    }

                });
            }   

            function pendulumrest() {
                $('#pendulum-parent').animate({rotate: 0},(swingtime/1.5), "swing");    
            }

            init(); 
        });
    });
})(jQuery);    
</script>
4

1 に答える 1

0

コードを見ていくと、振り子のスイングが停止するのはswingcount >= swings. これは、最初にマウスを要素の上に移動すると、swingcount が 5 に達するまで増加し続け、その後スイングが停止することを意味します。

マウスを要素の上に2回移動すると、アニメーションが実行されますinit（振り子の位置がリセットされていると思います）。pendulumswing次に、すぐにアニメーションを実行する呼び出しを行います。だからあなたは最初のスイングを見ます。最初のアニメーションが終了すると、スイング カウントがチェックされますが、これは以前の値である 6 のままです。これは条件を満たしていないため、pendulumrest代わりに が呼び出されます。

したがって、@Alex がコメントで述べたように、アニメーションを開始する前に、swingcount の値を 0 にリセットする必要があります。彼のコメントの考えを実装すると、コードは次のようになります。

<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        var rotation = 5; 
        var initrotation = rotation;
        var swingtime = 603;
        var swings = 5;
        var swingcount = 0; 
        var startatcentre = true;

        if (startatcentre == true) {
            initrotation = 0;
        }

        function init() {
            swingcount = 0;
            rotation = 5;
            $('#pendulum-parent').animate({rotate: initrotation}, 0, function () {
                $('#pendulum-parent').css("display", "block");
                rotation *= -1;
                swingcount++;
                pendulumswing();                    
            });
        }

        function pendulumswing() {
            $('#pendulum-parent').animate({rotate: rotation},swingtime, "swing", function(){
                 rotation *= -1;                     
                 if (swingcount >= swings) {
                    pendulumrest(); 
                } else {
                    swingcount++;
                    pendulumswing();                        
                }

            });
        }   

        function pendulumrest() {
            $('#pendulum-parent').animate({rotate: 0},(swingtime/1.5), "swing");    
        }

        $('#pendulum-child').mouseenter(function() {
            init(); 
        });
    });
})(jQuery);    
</script>

ところで、Javascript Patternsは JS を学ぶのにとても良い本です。初心者向けの本ではありませんが、彼はすべてを適切に説明しています。個人的には、Good Parts の本よりもはるかに読みやすいと思います。

于 2013-07-23T15:55:06.630 に答える