Jquery CSS3 Animate Tests

by blowsie

HTML

<script src="https://raw.github.com/brandonaaron/jquery-cssHooks/master/boxshadow.js"></script>
<script src="https://raw.github.com/brandonaaron/jquery-cssHooks/master/textshadow.js"></script>
<div id="box">WOW</div>

CSS

body {background:#111;}
#box {height:100px; width:100px; background:#eee; margin:50px;box-shadow: #f00f00 10px 10px 30px;}

JavaScript

$("#box").click(function(){
    if ($(this).hasClass("changed")) {
        $(this).animate({"borderTopRightRadius" : "270",
                        "borderTopLeftRadius" : "50",
                        "borderBottomRightRadius" : "50",
                        "borderBottomLeftRadius" : "270"}, 2000)
               .toggleClass("changed");
    }
    else {
        $(this).animate({"borderTopRightRadius" : "30",
                        "borderTopLeftRadius" : "30",
                        "borderBottomRightRadius" : "30",
                        "borderBottomLeftRadius" : "30",
                        "textShadow" : "#bed600 1px 1px"}, 2000)
               .toggleClass("changed");
    }

});