Hi! After few days ago I wrote about TipTip Jquery, Today I'll share about beautify sidebar link list with Jquery. Usually we have many link list in the sidebar, like categories, recent posts, or recent comments. We will add an effect to make this list prettier, if we hover to a link, the link will move smoothly to right and will back to original position then. This effect doesn't use a Jquery plugin, but we directly use the function in the Jquery framework. So, don't wait anymore, let's go to the steps!
Javascript
Add this following code before </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
If you have already add this code, you no longer need to add this code again.
Then, add this following code. This is the core of this tutorial.
<script type="text/javascript">
$(document).ready(function(){
$('.widget-content ul li a, #panel ul li a').mouseover(function(){
$(this).animate({paddingLeft:"20px"}, { queue:false, duration:250});
});
$('.widget-content ul li a, #panel ul li a').mouseout(function(){
$(this).animate({paddingLeft:"0"}, {queue:true, duration:250})
});
});
</script>
Some Options
- Change 250 to set the animation speed (in millisecond)
- Change 20 to set the animation distance (in px)
- If not work, try to change .widget-content with .sidebar
That's all. See you!!