0

次のコードがあります。

$(source)
.on('mouseenter', start)
.on('mouseleave', stop)
.on('mousemove', zoom.move);

ここでは、いくつかのマウス イベント リスナーをアタッチします。「mouseenter」イベントが発生すると、次の関数が実行されます。

    automove: function myAutomove() {

        var xPos = rand(0, outerWidth);
        var yPos = rand(0, outerHeight);

        $(img).animate({
            'top': (yPos - offset.top) * -yRatio + 'px',
            'left': (xPos - offset.left) * -xRatio + 'px' 
        }, defaults.speed, myAutomove);

    }

今のところ問題なく動作しますが、「mousemove」イベントが発生すると、次が実行されます。

    move: function (e) {

        var left = (e.pageX - offset.left),
        top = (e.pageY - offset.top);

        top = Math.max(Math.min(top, outerHeight), 0);
        left = Math.max(Math.min(left, outerWidth), 0);

        img.style.left = (left * -xRatio) + 'px';
        img.style.top = (top * -yRatio) + 'px';

    },

問題は、mousemove イベントが発生したときにアニメーション キューをクリアする必要があることですが、最初に完了する必要がある遷移アニメーションがあります。これらの両方の効果は同じ要素に適用されるため、単純に次のように記述します。

$img.clearQueue().stop();

...遷移アニメーションが表示されません。

次のフィドルで実際の例を見ることができます: http://jsfiddle.net/SL8t7/

4

2 に答える 2

1

「start」メソッドで設定されたアニメーションに onmousemove リスナーを追加することをお勧めします。また、「stop」メソッドが起動したときに onmousemove リスナーを削除します。

そうすれば、トランジションが完了した後にのみ mousemove がトリガーされます。

ここに、私が提案した変更を加えた jsfiddle があります

http://jsfiddle.net/XrKna/1/

move イベントがトランジションの完了を待機していることがわかります。

ここからイベントバインディングを移動しました...

                $(source)
                .on('mouseenter', start)
                .on('mouseleave', stop);

ここまで

                function start() {
                    zoom.init();
                    $img.stop().
                    fadeTo($.support.opacity ? settings.duration : 0, 1, function(){$img.on('mousemove', zoom.move)});
                    zoom.automove();
                }

                function stop() {
                    $img.off('mousemove', zoom.move);
                    $img.clearQueue().stop()                    
                    .fadeTo(settings.duration, 0);
                    manual_step = 0;
                }
于 2013-05-21T13:12:22.880 に答える