JQuery Animate with Interval

HTML

<button>CLICK ME!</button>

<div class="green"></div>

CSS

div {
    position: relative;
    width: 100px;
    height: 100px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
.green {
    left: 0;
    width: 100px;
    background: green;
}
.orange {
    left: 100px;
    width: 200px;
    background: orange;
}

JavaScript

var timer;

$('button').click( function() {
    
    
    if(timer) {
     
        clearInterval(timer);
        
    }
    
    animate();
        
});


function animate() {
    
    timer = setInterval(function(){
    
        if( $('div').hasClass('green') ) {
            
            $('div').removeClass('green');
        
            $('div').addClass('orange');
            
        } else {
         
            $('div').removeClass('orange');
        
            $('div').addClass('green'); 
        }
    
    }, 100);  
}