Question

我正在努力推进我的JQuery学习，我希望得到一些帮助。

看看：-link已删除，因为网站已不存在，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语句然后运行jquery如果position = 8px为真（对于顶部），并且底部相同

我希望我保留了之前的尝试，但他们早就被删除了，可能是出于挫败感。任何指导都将不胜感激。

Answer 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>

Answer 2

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

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

当<div>到达某个位置时停止</div>

3 个答案: