我正在尝试创建一个网页，其中一组DIV从上到下循环（参见小提琴） . 然后，只要您将鼠标悬停在div的某个部分（在本例中为STOP链接），动画就会停止，然后在mouseout上再次播放 . 我现在所缺乏的是一种在点击STOP链接时停止动画的方法 . 我在链接上添加了一个停止功能，但它不起作用 . 我所做的悬停功能可能存在冲突或某种冲突 .
在此先感谢您的帮助，并对于这个虚假的问题感到抱歉 .
链接到小提琴：http://jsfiddle.net/Psp9R/
jQuery的：
$(document).ready(function() {
$(".row").last().addClass("last");
$(".mholder").each(function() {
var i = 0;
$(this).find(".row").each(function() {
var $this = $(this);
$this.css("bottom", i);
i += $this.height();
});
});
// PLAY AND STOP
$('#start').click(function() {
$("#overlay").hide();
var countScrolls = $('.mholder .row').length;
for (var i=0; i < countScrolls; i++) {
doScroll($('.mholder .row:nth-child(' + i + ')'));
}
});
$('.stop').click(function() {
var countScrolls = $('.mholder .row').length;
$("#overlay").show();
for (var i=0; i < countScrolls; i++) {
$('.mholder .row:nth-child(' + i + ')').stop();
}
});
//PAUSE ON HOVER
$(".stop").hover(function () {
var countScrolls = $('.mholder .row').length;
for (var i=0; i < countScrolls; i++) {
$('.mholder .row:nth-child(' + i + ')').stop();
}
}, function () {
var countScrolls = $('.mholder .row').length;
for (var i=0; i < countScrolls; i++) {
doScroll($('.mholder .row:nth-child(' + i + ')'));
}
});
});
function doScroll($ele) {
var bottom = parseInt($ele.css("bottom"));
if (bottom < -60) { //bit arbitrary!
var $lastEle = $ele.closest('.mholder').find(".last");
$lastEle.removeClass("last");
$ele.addClass("last");
var bottom = (parseInt($lastEle.css("bottom")) + $lastEle.height());
$ele.css("bottom", bottom);
}
$ele.animate({
bottom: (parseInt(bottom) - 80)
}, 2200, 'linear', function() {
doScroll($(this))
});
}
2 回答
你知道吗，当你点击停止时，它确实停止了，但是当你将鼠标移出停止按钮时，浏览器会理解你发射鼠标事件并恢复它的慢跑 . 因此，您必须告诉浏览器您单击停止按钮并忽略mouseout事件 . 我通过添加标志
iStop来更改代码以命令浏览器停止 . 你可以查看：jsFiddle实现一个间隔，当单击停止链接时清除该间隔，然后在mouseout上再次启动 .
setInterval - https://developer.mozilla.org/en/docs/DOM/window.setInterval
clearInterval - https://developer.mozilla.org/en-US/docs/DOM/window.clearInterval