我有以下代码:
$(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();
...不显示过渡动画。
您可以在以下 fiddle 中看到实例:http://jsfiddle.net/SL8t7/
最佳答案
我建议将 onmousemove 监听器添加到“start”方法中的动画集。 另外,当“stop”方法触发时,我会删除 onmousemove 监听器。
这样,只有在转换完成后才会触发 mousemove。
这是一个包含我建议的更改的 jsfiddle
您将看到移动事件现在正在等待转换完成。
我从这里移动了事件绑定(bind)...
$(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;
}
关于javascript - 当 mousemove 事件发生时暂停动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16670528/