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

$(document).ready(function(){

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

function pulseHalo(e)
{
    TweenMax.fromTo(e.data.element, e.data.time, {backgroundColor:e.data.Color, boxShadow:'none'},{boxShadow:'0px 0px 1px 1px' + e.data.Color, yoyo:true, repeat:-1});
}

$(window).on('mousedown', {element:status, time:1, Color:'green'},pulseHalo);

$(window).on('mouseup', {element:status, time:1, Color:'blue'},pulseHalo);

});