<div> 到达某个位置时停止答案

【问题标题】：Stop when <div> gets to a certain position<div> 到达某个位置时停止
【发布时间】：2014-06-23 06:08:48
【问题描述】：

我正在努力推进我的 JQuery 学习，我想在某事上得到一点帮助。

看看：-链接已删除，因为站点不再存在，AK83 15-07-2016 -

我有一部电梯，如果你上下点击，它就会上下移动。这是我为此编写的代码：

<script type="text/javascript">
    $(document).ready(function() {
        $('#up').click(function() {
            $('#elevator').animate({top:'-=200px',
            duration: 1000,
        });
    });
    $('#down').click(function() {
        $('#elevator').animate({top:'+=200px',
        duration: 1000,
        });
    });
});
</script>

好东西。这是 HTML：

<div id="elevator_shaft">
    <div id="elevator">
    </div>
</div>

简单。

除非您会看到问题 - 点击向上，电梯会离开页面。往下点几下，会继续加减200px。

所以我的问题是，当电梯处于某个位置时，我该如何告诉动画不要发生？我试过写代码，如果电梯的位置= 8px（顶部），然后$('#up').stop();，但它不会停止。

我在这里猜测我需要函数来获取#elevator 的位置，然后运行 if/else 语句，如果 position = 8px 为真（对于顶部），则运行 jquery，对于底部也是如此.

我希望我保留以前的尝试，但它们早已被删除，可能是出于沮丧。任何指导将不胜感激。

【问题讨论】：

感谢大家的有用回复。我目前因流感而昏昏欲睡，但当我回到电脑后面时，我会查看您的回复 - 但我从未想过检查电梯所在的楼层。我会检查它们并回复最适合我的方法！

标签： jquery position jquery-animate

【解决方案1】：

您可以存储一些外部变量来检查电梯位于哪个楼层（位置）。找到下面的代码。

<script type="text/javascript">

    $(document).ready(function() {

        var elevatorPosition = 0;
        var elevatorMaxPosition = 3; //You can specify the maximum floors. As per your demo total 4 floor are there (0-3).
        $('#up').click(function() {
            if(elevatorPosition != elevatorMaxPosition)
            {
                elevatorPosition += 1;
                $('#elevator').animate({top:'-=200px',
                    duration: 1000,
                });
            }
        });
        $('#down').click(function() {
            if(elevatorPosition != 0)
            {
                elevatorPosition -= 1;
                $('#elevator').animate({top:'+=200px',
                    duration: 1000,
                });
            }
        });
    });
</script>

【讨论】：

你先生是个明星——这个方法的一个稍微修改过的版本对我有用。

【解决方案2】：

在您的点击事件中，您可以使用 JQuery 的 .position() 函数来获取电梯的当前位置以首先检查动画是否应该触发：https://api.jquery.com/position/

【讨论】：

【解决方案3】：

如果一开始的电梯位置是1，并且知道楼层数，可以用一个变量保存当前楼层。

var floor = 1;
var maxfloor = 5
$(document).ready(function() {
        $('#up').click(function() {
            if(floor != 1){
                $('#elevator').animate({top:'-=200px',
                duration: 1000});
                floor = floor  - 1;
            }                

        });

    $('#down').click(function() {
        if(floor != maxfloor ){
            $('#elevator').animate({top:'+=200px',
            duration: 1000});
            floor = floor  + 1;
        }                            
    });
    });

【讨论】：