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

【问题标题】：How do I tell the animation when to stop moving the div? Using an If statement?如何告诉动画何时停止移动 div？使用 If 语句？
【发布时间】：2012-08-17 15:13:56
【问题描述】：

所以我在 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);
})




})

【问题讨论】：

演示：jsfiddle.net/userdude/eqW66 请使用; 来结束您的所有声明，对于许多人来说，将所有样式声明放在一行中很难阅读。您也可以通过将绝对链接放入图片所在的位置来使这一点更容易理解。
我在内部网系统中工作
我能想到的唯一明智的做法是在您的 $.ready() 块中使用 var datePosition（因此它是局部范围的），并且对于每个动画，添加和减去运动，并计算并确定datePosition 的有效范围是多少，如果超出该范围，则取消$.animate()。
实际上，现在我在想...您可以使用$.scrollTo 并使用:contains 选择器来查找相关年份（而不是上升一定数量），或者。 .. $(this).prev() 在当前选定的年份 div 到 $.scrollTo()。如果当前上方/下方没有元素，则无法“滚动到”不存在的元素。

标签： jquery if-statement jquery-animate positioning timeline

【解决方案1】：

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

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

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

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

更新**

请参阅下面的 jsfiddle 了解其余 4 个功能。您必须切换到 >= 才能向下移动。

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);
    }
});

【讨论】：

1943 是 (top:0px)，2012 是 (top:28105px)
这个工作：$('#yearUp').click(function(){ var pos = $('.timeHolder').position(); if (pos.top + 365
但另一种方式没有： $('#yearDown').click(function(){ var pos = $('.timeHolder').position(); if (pos.top - 365
我想我在这里搞糊涂了
OK 所以 pos 的值为 0 但 pos 的初始值应该是 top: -24820px;

【解决方案2】：

看起来您正在为 .timeView 元素初始化 top，但正在为 marginTop 设置动画。我会说只是动画顶部。然后你可以检查 top 是否接近 0 并且只动画那么远。 Here's an updated jsfiddle.

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

【讨论】：

这并不能阻止它超出基准年（1943 年）。 OP 所问的问题是什么。
好的，所以它在 1943(0) 处停止，问题是当它到达 1943 标记（即顶部：0）时，按钮不再起作用并且它不会停止在最大高度（顶部：28105 像素）

【解决方案3】：

好的，知道了，你必须找出初始位置，然后从起点减去和添加位置：

我的 div 总高度是 28105 像素

我的起点是2011年（那一年）：

2011的位置是24829px

文档就绪时的 this 设置为 0

所以你必须弄清楚在哪里停止和开始

这是脚本：

// 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 内部是不允许的。感谢其他人的意见

【讨论】：