javascript - 当某个 id 可见时，如何让时间轴悬停动画停止？

Question

我正忙着做一个时间线，它的基本左右功能可以用我目前遇到的问题是悬停功能将时间线移动得比我需要的更远。我有一个想法，当最后一个 li (#last) 可见时停止动画，反之亦然，当第一个 li (#first) 可见时。我认为我对 jQuery 的实现可能是错误的，非常感谢您的帮助。请参阅下面的 JSFIDDLE 和 jQuery 代码。

JSFIDDLE:http://jsfiddle.net/Jason1975/6nwkd2c8/84/

$(document).ready(function(){
    if ($("li#last:visible")) {
        stop();
    } else {
        $("a#next").click(function () {
            $("#new").animate({
                "left": "-=100px"
            }, 200); 
        });
    }

    if ($("li#first:visible")) {
        stop(); 
    } else {
        $("a#prev").hover(function () {
            $("#new").animate({
                "left": "+=100px"
            }, 200);
        }); 
    }
}); 

Answer 1

有几件事我必须改变。首先是您的标记从来没有能够移动的定位。所以我将 position:relative; 添加到 #new。

<ul id="new" style="width: 1025px; position:relative;">

请注意，我还删除了翻译属性，因为您使用的是 jQuery 的动画，而翻译用于 CSS3 动画。

我还将悬停功能更改为:

    var containerWidth = $('#container').width(); 
    $('a#next').hover(function(){
        $("#new").animate({
            "left": -Math.abs(containerWidth) - 150
        }, 1000);
    }, function(){
        $("#new").stop();
    });
    $('a#prev').hover(function(){
        $("#new").animate({
            "left": 50
        }, 1000);
    }, function(){
        $("#new").stop();
    });

并将其添加到您的 document.ready 函数中。希望对您有所帮助!

这是一个有效的 DEMO .