Animated Label with jQuery

Did you know, jQuery Link Nudging? Now we will add jQuery Link Nudging in Label. What is the effect? So, when you put your cursor on one of the label, the label will be move to the right. The  You can try in this page (Try on "Labels"). Looks nice right? Now, if you wanna try Animated Label with jQuery, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script>

4. Click SAVE TEMPLATE

So easy right, to add Animated Label with jQuery?


From :
Full Blog Tricks 

Posted in: SEO