jQuery animation

animation

by cliftonyeo

HTML

<button id="boomz">DON'T CLICK HERE</button>
<!-- anything can be a button; video, picture,
div .etc -->



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

<button id="shh">click here, please</button>

CSS

div {
    width: 100px;
    height: 100px;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    transition: 0.5s ease;
    
}
.green {
    background: green;
    width: 100px;
}
.orange {
    background: orange;
    height:300px;
    width:300px;
    transform: rotate(345deg);
}

#shh {
    position:absolute;
    top: 150px;
}
}

JavaScript

var timer;        //defines the var 'timer' at the global level so that it can be accessed below within other functions

var animating = false;

$('#boomz').click( function() {
   
    if(animating == false) {//if not animating, start
      
        animate(); //clicking the button will activate the animation
        
    } else {//else if animating, stop
       
      animating = false;
      clearInterval(timer);
         
    }
    
    
}   
);      

function animate() {
    
    animating = true;
    
    timer = setInterval(function(){        
        
        //the variable 'timer' is in the scope of the animate() function
    
    if( $('div').hasClass('green') ) {
    
        $('div').removeClass('green');
        $('div').addClass('orange');
        
    } else {
        $('div').removeClass('orange');
        $('div').addClass('green');   
    }        
    
    
    }, 500);    //500 = animation duration in miliseconds

}