JQuery Animate with Interval

by yuriku

HTML

<button>눌러</button>

<div class="GreenYellow"></div>

CSS

div {
    position: relative;
    width: 100px;
    height: 100px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}

.GreenYellow {
    left:0px;
    width: 100px;
    background: GreenYellow;
}
.Fuchsia {
    left: 100px;
    width:200px;
    background: Fuchsia;
}

}

JavaScript

var timer;

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


function animate() {
    
    timer = setInterval(function(){
    
        if( $('div').hasClass('GreenYellow') ) {
        
        $('div').removeClass('GreenYellow');
    
        $('div').addClass('Fuchsia');
        
    } else {
        
        $('div').removeClass('Fuchsia');
    
        $('div').addClass('GreenYellow');      
    
        }
    
    }, 1000);
    
}