Change Box shadow and color

Change Box shadow and color on window click events mouse up and mouse down

by rhernando

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.1/TweenMax.min.js"></script>
<div id="tablet-status"></div>

CSS

#tablet-status{
    position:relative;
    top:100px;
    left:100px;
    height:150px;
    width:150px;
    background:#EEE;
}

JavaScript

var status = $('#tablet-status')
var clickStatus = TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px green', paused:true, repeat:1, yoyo:true});
var unclickStatus = TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px blue', paused:true, repeat:1, yoyo:true});

$(window).mousedown(function(){ 
   TweenMax.to(status, .25, { backgroundColor:'green'});
   clickStatus.play(0);
   unclickStatus.pause(0);
})
$(window).mouseup(function(){
    TweenMax.to(status, .25, { backgroundColor:'blue'});
    clickStatus.pause(0);
    unclickStatus.play(0); 
})