如何让时间轴悬停动画在某个 ID 可见时停止

how to get a timeline hover animation to stop when a certain id is visible?

本文关键字：ID 时间 动画 悬停      更新时间：2023-09-26

我正忙于时间线，它的基本左右功能有效我目前遇到的问题是悬停功能将时间线移动到比我需要的更远的地方。我有一个想法，当最后一个 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);
        }); 
    }
});

有几件事我必须改变。首先，您的标记从未具有能够移动的位置。所以我在#new中添加了position:relative;.

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

注意，我还删除了翻译属性，因为您使用了jQuery的animate，并且translate适用于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 函数中。我希望这有帮助！

这是一个有效的演示。

相关文章：