Stop when <div> gets to a certain position

Question

I'm trying to advance my JQuery learning and I would like a little bit of help on something.

Take a look: -link removed as site no longer exists, AK83 15-07-2016 -

I have an elevator which, if you click up and down, it goes up and down. Here is the code I've written for this:

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

Good stuff. Here is the HTML:

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

Simple.

Except you'll see an issue - click up, the elevator goes off the page. Click down a few times, and it will continue to add or subtract 200px.

So my question is, how do I go about telling the animation to not happen when the elevator is in a certain position? I have tried writing code that says if the position of the elevator = 8px (top), then $('#up').stop(); but it doesn't stop.

I am guessing here that I need to function that gets the position of #elevator, and then run an if/else statement that then runs the jquery if position = 8px is true (for the top), and the same for bottom.

I wish I had kept my previous attempts but they have long been deleted, probably out of frustration. Any guidance would be appreciated.

Answer 1

You can store some external variable to check at which floor ( position ) the elevator is lying. Find the below code.

<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

On your click events you could use JQuery's .position() function to get the elevator's current position to first check if the animation should trigger: https://api.jquery.com/position/

Answer 3

if the elevator position at the beginning is 1 and you know the number of floor, you can use a variable that save the current floor.

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