jquery - 如何告诉动画何时停止移动 div？使用 If 语句？

Question

所以我在 Jquery 中使用定位创建了一个时间线，我可以很容易地让它上下移动问题是时间线应该只从 1943 年到 2020 年。我已经让时间线上下移动很容易，但是它将超过日期，并且什么都不会显示。如果点击功能到达时间线的末尾，我需要让它停止。

HTML：

<aside class="timeContainer">

    <div class="timeControlUp">
        <div id="yearUp"></div>
        <div id="decadeUp"></div>
    </div>
    <div class="timeHolder">
        <div class="timeView">
            <div class="longTimeline">

<!-- Year Markers -->            
                <div class="yearMarker">1943</div><div class="yearMarker">1944</div><div class="yearMarker">1945</div><div class="yearMarker">1946</div><div class="yearMarker">1947</div><div class="yearMarker">1948</div><div class="yearMarker">1949</div><div class="yearMarker">1950</div><div class="yearMarker">1951</div><div class="yearMarker">1952</div><div class="yearMarker">1953</div><div class="yearMarker">1954</div><div class="yearMarker">1955</div><div class="yearMarker">1956</div><div class="yearMarker">1957</div><div class="yearMarker">1958</div><div class="yearMarker">1959</div><div class="yearMarker">1960</div><div class="yearMarker">1961</div><div class="yearMarker">1962</div><div class="yearMarker">1963</div><div class="yearMarker">1964</div><div class="yearMarker">1965</div><div class="yearMarker">1966</div><div class="yearMarker">1967</div><div class="yearMarker">1967</div><div class="yearMarker">1969</div><div class="yearMarker">1970</div><div class="yearMarker">1971</div><div class="yearMarker">1972</div><div class="yearMarker">1973</div><div class="yearMarker">1974</div><div class="yearMarker">1975</div><div class="yearMarker">1976</div><div class="yearMarker">1977</div><div class="yearMarker">1978</div><div class="yearMarker">1979</div><div class="yearMarker">1980</div><div class="yearMarker">1981</div><div class="yearMarker">1982</div><div class="yearMarker">1983</div><div class="yearMarker">1984</div><div class="yearMarker">1985</div><div class="yearMarker">1986</div><div class="yearMarker">1987</div><div class="yearMarker">1988</div><div class="yearMarker">1989</div><div class="yearMarker">1990</div><div class="yearMarker">1991</div><div class="yearMarker">1992</div><div class="yearMarker">1993</div><div class="yearMarker">1994</div><div class="yearMarker">1995</div><div class="yearMarker">1996</div><div class="yearMarker">1997</div><div class="yearMarker">1998</div><div class="yearMarker">1999</div><div class="yearMarker">2000</div><div class="yearMarker">2001</div><div class="yearMarker">2002</div><div class="yearMarker">2003</div><div class="yearMarker">2004</div><div class="yearMarker">2005</div><div class="yearMarker">2006</div><div class="yearMarker">2007</div><div class="yearMarker">2008</div><div class="yearMarker">2009</div><div class="yearMarker">2010</div><div class="yearMarker">2011</div><div class="yearMarker">2012</div><div class="yearMarker">2013</div><div class="yearMarker">2014</div><div class="yearMarker">2015</div><div class="yearMarker">2016</div><div class="yearMarker">2017</div><div class="yearMarker">2018</div><div class="yearMarker">2019</div>

<!-- End Year Markers -->           

            <img src="img/dateButton.png" id="dateButton1" class="dateButton" />
            <img src="img/dateButton.png" id="dateButton2" class="dateButton" />
            <img src="img/dateButton.png" id="dateButton3" class="dateButton" />

            </div>
        </div>
    </div>  

CSS：

/*---------- Start Timeline 2 ---------*/

.timeContainer { position: fixed; width: 100px; height: 90%; margin: 2% 0% 5% 0%; top: 0px; right: 30px; overflow:hidden;}

.timeControlUp { position:absolute; width: 100px; height: 50px; top: 0px; left: 0px; background-image:url(../img/timeButBG.png); z-index: 101; text-align:center;}

#yearUp { position: relative; top: 0px; left: 0px; width: 50px; height: 50px; background-image: url(../img/timeUp.png); background-repeat:no-repeat; background-position:top left; cursor:pointer;}

#yearUp:hover { position: relative; top: 0px; left: 0px; width: 50%; height: 50px; background-image: url(../img/timeUp.png); background-repeat:no-repeat; background-position: -100px 0px; cursor:pointer;}

#decadeUp { position: relative; top: -50px; left: 50px; width: 50%; height: 50px; background-image: url(../img/timeUp.png); background-repeat:no-repeat; background-position: -52px 0px; cursor: crosshair;}

#decadeUp:hover { position: relative; top: -50px; left: 50px; width: 50px; height: 50px; background-image: url(../img/timeUp.png); background-repeat:no-repeat; background-position: -152px 0px; cursor:pointer;}


.timeHolder { position: absolute; width: 100px; height: 100%; margin: 50px 0px 50px 0px; top: 0px; left: 0px;}

.timeView { position:absolute; width: 100%; height: 28105px; top: -24820px; left: 0px; background-image:url(../img/longTimeBG3.png); background-repeat:repeat-y; background-position: top left; z-index: 90;}

.timeControlDown { position:absolute; width: 100%; height: 50px; bottom: 0px; left: 0px; background-image:url(../img/timeButBG.png); z-index: 101;}

#yearDown { position: relative; top: 0px; left: 0px; width: 50px; height: 50px; background-image: url(../img/timeDown.png); background-repeat:no-repeat; background-position:top left; cursor:pointer;}

#yearDown:hover { position: relative; top: 0px; left: 0px; width: 50%; height: 50px; background-image: url(../img/timeDown.png); background-repeat:no-repeat; background-position: -100px 0px; cursor:pointer;}

#decadeDown { position: relative; top: -50px; left: 50px; width: 50%; height: 50px; background-image: url(../img/timeDown.png); background-repeat:no-repeat; background-position: -52px 0px; cursor: crosshair;}

#decadeDown:hover { position: relative; top: -50px; left: 50px; width: 50px; height: 50px; background-image: url(../img/timeDown.png); background-repeat:no-repeat; background-position: -152px 0px; cursor:pointer;}

.yearMarker { position:relative; z-index: 91; top:0px; right: 0px; width: 95px; height: 365px; text-align:right; font-family:Verdana, Geneva, sans-serif; font-weight:bold; color: #000; }


.dateButton { width: 40px; cursor:pointer;}
#dateButton1 { position:absolute; z-index: 102; top:25430px; left: 5px; width: 30px; height: 30px; text-align:right; font-family:Verdana, Geneva, sans-serif; font-weight:bold; color: #000; }
#dateButton2 { position:absolute; z-index: 102; top:24687px; left: 5px; width: 30px; height: 30px;}
#dateButton3 { position:absolute; z-index: 102; top:21212px; left: 5px; width: 30px; height: 30px;}

/*---------- End Timeline 2 ---------*/

和脚本本身：

// JavaScript Document
$(document).ready(function() {


$('#yearUp').click(function(){
    $('.timeHolder').animate({
        marginTop: '+=365px',
    }, 1000);
})
$('#yearDown').click(function(){
    $('.timeHolder').animate({
        marginTop: '-=365px',
    }, 1000);
})
$('#decadeUp').click(function(){
    $('.timeHolder').animate({
        marginTop: '+=3650px',
    }, 1000);
})
$('#decadeDown').click(function(){
    $('.timeHolder').animate({
        marginTop: '-=3650px',
    }, 1000);
})




})

Answer 1

进行了一些更改以使其正常工作。

首先是我将动画更改为使用top定位而不是margin. 接下来，我找到了最后一个元素的位置（1943 年），并在事件中放置了一个简单if的click事件，检查动画是否会超过这个最终位置。如果是这样，动画将不会触发。您可以将同样的心态应用于您的其他功能。我通常不喜欢使用绝对值来处理这样的事情，但有时它工作得很好，尤其是当列表是静态的时。

http://jsfiddle.net/eqW66/9/

$('#yearUp').click(function(){
    var pos = $('.timeHolder').position();
    if (pos.top + 365 <= 24820) {
        $('.timeHolder').animate({
            top: '+=365px',
        }, 1000);
    }
});

更新 **

其余 4 个函数请参见下面的 jsfiddle。您必须切换到 >= 才能向下移动。

http://jsfiddle.net/eqW66/9/

$('#yearDown').click(function(){
    var pos = $('.timeHolder').position();

    if (pos.top - 365 >= -2920) {
        $('.timeHolder').animate({
            top: '-=365px',
        }, 1000);
    }
});

$('#decadeDown').click(function(){
    var pos = $('.timeHolder').position();

    if (pos.top - 3650 >= -2920) {
        $('.timeHolder').animate({
            top: '-=3650px',
        }, 1000);
    }
});

Answer 2

看起来您正在top为.timeView元素初始化，但正在为marginTop. 我会说只是动画顶部。然后你可以检查 top 是否接近 0 并且只动画那么远。这是一个更新的 jsfiddle。

我只更改了 yearup 事件，但您应该能够弄清楚其余的。要检测它是否接近底部，您必须使用当前顶部值加上容器的高度，并将其与完整的可滚动高度进行比较。

Answer 3

好的，弄清楚了，您必须找出初始位置并从起点减去和添加位置，因此：

我的 div 总高度是 28105px

我的起点是 2011 年（当年）：

2011的位置是24829px

文档就绪时的 this 设置为 0

所以你必须弄清楚 where3 停止和开始

这是脚本：

// JavaScript Document 

$(document).ready(function() {

    $('#yearUp').click(function(){
        var pos = $('.timeHolder').position();        
        if (pos.top + 365 <= 24820) {
            $('.timeHolder').animate({
                top: '+=365px',
            }, 1000);
        }else{
            return false
        }
    });
    $('#yearDown').click(function(){
        var pos = $('.timeHolder').position();        
        if (pos.top - 365 >= -2555) {
            $('.timeHolder').animate({
                top: '-=365px',
            }, 1000);
        }else{
            return false
        }
    });
    $('#decadeUp').click(function(){
        var pos = $('.timeHolder').position();        
        if (pos.top + 3650 <= 24820) {
            $('.timeHolder').animate({
                top: '+=3650px',
            }, 1000);
        }else{
            return false
        }
    });
    $('#decadeDown').click(function(){
        var pos = $('.timeHolder').position();        
        if (pos.top - 3650 >= -2555) {
            $('.timeHolder').animate({
                top: '-=3650px',
            }, 1000);
        }else{
            return false
        }
    });


});

非常感谢@PJH 帮助指导道路，对不起，我无法为小提琴提供更多图像和东西，但在 Intranet 内是不允许的。感谢其他所有人的意见