I got this background image slider thing working in chrome and safari, but it doesnt do anything in firefox. any help?

$(function(){
    var image= ".main-content";
    var button_left= "#button_left";
    var button_right= "#button_right";
    var animation= "easeOutQuint";
    var time= 800;
    var jump= 800;
    var action= 0;

    $(button_left).click(function(){
        right();
    });
    $(button_right).click(function(){
        left();
    });
    $(document).keydown(function(event){
        if(event.keyCode == '37'){
            right();
        }
    });
    $(document).keydown(function(event){
        if(event.keyCode == '39'){
            left();
        }
    });
    function left(){
        if(action == 0){
            action= 1;
            $(image).animate({backgroundPositionX: '-='+jump+'px'}, {duration: time, easing: animation});
            setTimeout(anim, time);
        }

    }
    function right(){
        if(action == 0){
            action= 1;
            $(image).animate({backgroundPositionX: '+='+jump+'px'}, {duration: time, easing: animation});
            setTimeout(anim, time);
        }
    }
    function anim(){
        action= 0;
    }
}); 

I also tried this but it also does nothing

$(image).animate({backgroundPosition: '500px 0px'}, 800);