jQuery: 'Spin In' Borders Effect

Submitted by nathanator11

Posted Jan 13 2011 04:25 PM

When you add a border to an image, it can be useful to animate it. This will both draw the user's eye to it, and make it seem a little fancier. The best way, I've found, to do this is to animate in one border at a time so it appears to 'spin' in clockwise. It uses the jQuery Color official plugin. Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/color/jquery.color.js"></script>
<script type="text/javascript">
function spinBorder() { 
//replace the animation duration and delay time to time the effect just right for your page
//replace the color to whatever color you want your borders to me
   $('.bordered').animate({borderTopColor: '#00CCFF'}, 300).delay(50).animate({borderRightColor: '#00CCFF'}, 300).delay(50).animate({borderBottomColor: '#00CCFF'}, 300).delay(50).animate({borderLeftColor: '#00CCFF'}, 300).delay(50);
}
$(document).ready(function() {$('.bordered').mouseenter(spinBorder);}); //change trigger event to whatever you want
</script>
<style type="text/css">
body {background-color:#ff4;}
.bordered {width:300px; border:10px solid #ff4;}
</style>
</head>

<body>
<img src="http://wpmu.org/wp-content/uploads/2010/04/jquery-logo1.png" class="bordered"> <!--i borrowed this image of the jquery logo-->
</body>
</html>

UPDATE: Fixed comment syntax problem. Works now.

This post has been edited by nathanator11: 13 January 2011 - 07:43 PM