ScrollLeft animation fails on second attempt

Question

I have a left-scrolling animation which works well on first run. If the button is clicked, the scroll will animate to the rightmost area, then go back to the original position. But when the button is clicked again, the content scroll snaps to the far right, an scrolls back to the original position. I can't get what is the problem. Please help. Thanks in advance.

fiddle: http://jsfiddle.net/tXt3T/

HTML:

<div class="main">
    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>   
</div>
<button id="button">Scroll</button>

CSS:

* { margin: 0 auto; padding: 0;} .clearfix {clear:both;}
    .wrapper { width: 100%;}
    .main { width: 100%; height: 300px; position: relative; overflow: scroll;}
    .content { width: 200%; position: absolute; left: -500;}

JS:

var scrollLeftInt,  scrollRightInt,  scrollTarget,      
        scrollToLeft = function(t) {                
            if($(".main").scrollLeft() < scrollTarget) {
                $(".main").scrollLeft($(".main").scrollLeft() + (scrollTarget*0.01));                   
            }
            else {
                clearInterval(scrollLeftInt);
                $(".main").scrollLeft(scrollTarget);
                scrollRightInt = setInterval(function() {scrollToRight(t);}, t);
            }
        },
        scrollToRight = function() {
            if ($(".main").scrollLeft() > 0) {
                $(".main").scrollLeft($(".main").scrollLeft() - (scrollTarget*0.01));
            }
            else {                  
                clearInterval(scrollRightInt);
                $("#button").removeAttr('disabled');
                $(".main").scrollLeft(0);
                scrollLeftInt = ""; scrollRightInt ="";
                console.log(scrollRightInt);
            }
        };

    $(function() {
        console.log("Script File is working");
        $("#button").click(function() {
            var t = 10;
            $(this).attr('disabled', true);
            $(".main").scrollLeft(scrollTarget);
            scrollTarget = $(".content").width() - $(".content").parent().width() ;                     
            scrollLeftInt = setInterval(function() {scrollToLeft(t);}, t);      
        });         
    });

Answer 1

Just remove this line, once you don't initialize it and its undefined:

$("#button").click(function() {
        var t = 10;
        $(this).attr('disabled', true);
        // $(".main").scrollLeft(scrollTarget);
        scrollTarget = $(".content").width() - $(".content").parent().width() ;                     
        scrollLeftInt = setInterval(function() {scrollToLeft(t);}, t);      
    }); 

http://jsfiddle.net/tXt3T/2/