Twitter Bootstrap Class Animation
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<div class="container-fluid">
<div class= "row-fluid">
<div class="span6">
<h1>CSS</h1>
<img src="http://placehold.it/140x140" class="img-circle css">
</div>
<div class="span6">
<h1>jQuery</h1>
<img src="http://placehold.it/140x140" class="img-circle js">
</div>
</div>
</div>
CSS
img {
cursor:pointer;
}
img.css {
-webkit-transition:border-radius 0.8s linear;
-moz-transition:border-radius 0.8s linear;
-o-transition:border-radius 0.8s linear;
transition:border-radius 0.8s linear;
}
img.css:hover {
border-radius: 6px;
}
JavaScript
$(".js").hover(function() {
$(this).animate({
"border-radius": "6px"
});
}, function() {
$(this).animate({
"border-radius": "500px"
});
});