Question

Say position starts at 0, c.width equals 700. After I click on #button twice, the animation should stop working. But it didnt. I guess it’s because the values of my variables remain the same after every click on #button.

How do I loop the variables so they update the value every time I click on #button? (The value of position should change every time I click on #button, but I don’t know how…)

<script type="text/javascript">
$(document).ready(function(){
    $('#button').click(function(){
        var c=$('#content');
        var position=c.position();
        var w=c.width();
        var status=w - position.left;
        if(status>500){
            c.stop().animate({left:position.left - 100},300)};
            var position=c.position();
        });
    })
</script>

Answer 1

According to your math, status will not only always be greater than 500, but it will increase as well.

Click -> 500
Click -> 700
Click -> 900
Click -> 1100

You can change your math like so:

if (status < 900) {
    c.stop().animate({
        left: position.left - 100
    }, 300)
};

Here’s a demo: http://jsfiddle.net/qbLd2/