Lateral Code

Link nudging with jQuery continued

By Patrick Lin on Wednesday, December 31st, 2008 | Tags: javascript, tutorial | No Comments »

When we left off last time, I showed you how to do simple link nudging with jQuery. In this post, I’ll show you how to add some more CSS styling, so if you haven’t read the previous article, I suggest you read it now before you continue.

The last snippet in the last article was this:

$(function() {
    $('a').hover(function() {
        $(this).stop().animate( {
            paddingLeft:"30px"
        }, 300);
    }, function() {
        $(this).stop().animate( {
            paddingLeft:"0"
        }, 300);
    });
});

Let’s first begin with some CSS. This is the CSS used in this demo:

Read the rest of this entry »

Link nudging with jQuery

By Patrick Lin on Sunday, December 28th, 2008 | Tags: javascript, tutorial | 3 Comments »

A simple, subtle yet aesthetically pleasing effect you can use is Link Nudging. What does this mean? Something like what’s seen here.

Link nudging is used by big web design websites such as CSS Tricks through MooTools or jQuery.

This post will show how to do a simple Link nudging using the JavaScript library jQuery. You can use jQuery inside <script></script> or in an external JavaScript file.

You can get jQuery here, or import it from Google AJAX Libraries API, like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Read the rest of this entry »