Sunday, July 17, 2011

Animated Label with jQuery


I saw this wondering trick on one of my followers blog. Thought I might share it with you guys since it's really cool and adds a special touch to your blog B) you'll love it for sure ;)


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. 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);
});

4. Click (Save Template)  

How did it turn out ?! B)

Source: [Link

0 comments:

Post a Comment

Inspired ?! Want to say your thoughts ~!? Feel free to write down whatever your heart desires to I'd love hearing from you even a simple THANK YOU will do it ~㋡

 
Related Posts Plugin for WordPress, Blogger...