Jquery: How to prevent further animating to the left when style: left == 0 or 0px?

Question

How would I prevent a div from scrolling further left when the style 'left' of that div reached '0' or '0px'? Right now I am using the animate custom effect to scroll a div left and right to display hidden overflows but when the div reaches '0' or '0px' on style: left, I want the user to be prevented from scrolling further left where there is no content, just empty space. I currently have the following code which doesn't seem to be working the way I want:

$(document).ready(function(){
if ($("#ajax-matched-results").css('left') == '0' || '0px') {
 $("#scrollLeft-results").click(function() {
 $(".matched-results-items").animate({"left": "0px"}, "slow");
 });
 $("#scrollRight-results").click(function() {
 $(".matched-results-items").animate({"left": "-=547px"}, "slow");
 });
} else {
    $("#scrollLeft-results").click(function() {
 $(".matched-results-items").animate({"left": "+=547px"}, "slow");
    });
    $("#scrollRight-results").click(function() {
 $(".matched-results-items").animate({"left": "-=547px"}, "slow");
    });
    }
});

Thanks for any help!

Answer 1

first of all, shouldn't the if statement be INSIDE the click event? I don't see how this would execute at all, or at most once.

also, your first if statement will always be true. what you want is

if ($("#ajax-matched-results").css('left') == '0' || $("#ajax-matched-results").css('left') == '0px')

also, i'm not 100% sure that the "-=547px" and such will work as expected either. do you want to increment them by that value every time it is clicked, or do you want to set them to that value. I'm going to assume you want to increment it every time.

Here is more or less what you should have:

$(function(){
    // this actually eliminates the need for the above if statement
    // assuming you only have one thing you're going to animate
    var position = 0;

    // move object right 547px regardless of current position
    $('#scrollRight-results').click(function(){
        // animate regardless?
        // unless you're setting right side bounds as well
        position += 547;
        $('id').animate({'left': position}, 'slow');
    });

    // move object left 547px if not already at 0
    $('#scrollLeft-results').click(function(){
        if (position != 0){
            position -= 547;
            $('id').animate({'left': position}, 'slow');
        }
    });
})

Answer 2

I can almost guarantee you that this code will break if you keep clicking the button because you are not checking the animation so it will keep going as long as it isnt. so you should do something like:

if($("selector").is(":animated")){
 return false;
}