0

我正在尝试制作一个网页，其中一组 DIV 从上到下循环（参见小提琴）。然后，每当您将鼠标悬停在 div 的某个部分（在本例中为 STOP 链接）时，动画就会停止，然后在鼠标移出时再次播放。我现在缺少的是一种在单击 STOP 链接时停止动画的方法。我在链接上添加了停止功能，但它不起作用。我制作的悬停功能可能存在冲突或某种冲突。

提前感谢您的帮助，并对这个愚蠢的问题感到抱歉。

链接到小提琴：http: //jsfiddle.net/Psp9R/

查询：

$(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))
    });
}
4

2 回答 2

0

实现一个间隔，当单击停止链接时清除该间隔，然后在鼠标移出时再次启动。

setInterval - https://developer.mozilla.org/en/docs/DOM/window.setInterval

clearInterval - https://developer.mozilla.org/en-US/docs/DOM/window.clearInterval

于 2013-04-11T07:14:29.183 回答
0

您知道吗，当您单击停止时，它确实会停止，但是当您将鼠标移出停止按钮时，浏览器会理解您触发了 mouseout 事件并恢复其 jogging 。因此，您必须告诉浏览器您单击停止按钮并忽略 mouseout 事件。iStop我通过添加一个标志来命令浏览器停止来更改您的代码。您可以在以下位置查看：jsFiddle

于 2013-04-11T07:55:36.557 回答