次のコードがあります。
$(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/