WHICH "BLOG CONTENTS" YOU ARE LOOKING FOR

Custom Search

Thursday 29 September 2011

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 

0 comments:

Post a Comment