Box shadow animation

by tnhu

HTML

<button id="t">Toggle the 'shadow' class</button>

<div id="box">Some content in the 'box' div.</div>

CSS

#box {
    width: 50px;
    height: 200px;
}

#box:hover {
    -webkit-box-shadow: 0px 0px 4px 2px #ccc;
    -moz-box-shadow: 0px 0px 4px 2px #ccc;
    box-shadow: 0px 0px 4px 2px #ccc;
    -webkit-transition: all .4s linear;
    -o-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -kthtml-transition: all .4s linear;
    transition: all 1s linear;
}

JavaScript

$('#t').click(
    function(){
        $('#box').toggleClass('shadow');
    });