How do I put limitations on how far a jQuery event can go?

$(document).ready(function() {
        var $left = $('#scroll-left');
        var $right = $('#scroll-right');
        var position = $('#article_body').css('left');
        if (position <= '-450px') {
            $left.click(function() {
                $('#article_body').animate({
                    left: '+=450px'
                }, '1000');
            });
        } else if (position >= '-4500px') {
            $right.click(function() {
                $('#article_body').animate({
                    left: '-=450px'
                }, '1000');
            });
        }

 });

I made a horizontally scrolling page by setting the CSS left property on my containing div. What I want it to do is only move in between the interval of 0px and -4500px. So if I click left and it'开发者_开发百科s at 0px, it will only move right, or if it's at -4500px and I click right, it will only move left.

Thanks

---

You need to do the check inside the handlers, like this:

$(document).ready(function() {
  $('#scroll-left').click(function() {
    if ($('#article_body').css('left') <= '-450px') {
      $('#article_body').animate({ left: '+=450px' }, '1000');
    }
  });
  $('#scroll-right').click(function() {
    if ($('#article_body').css('left') >= '-4500px') {
      $('#article_body').animate({ left: '-=450px' }, '1000');
    }
  });
});

Currently you're checking the position when the DOM loads, rather than when the button is clicked. Instead you need to do the reverse, and check when the button is clicked...like above. If it's scrolled too far in the direction you're checking (the if check fails), the click will just have no effect.

---

If you add a diagram of the interaction you desire, like a swimlane or something, that would be helpful.