A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Code Snippets > jQuery > Sliding Background Links Submit one!

Sliding Background Links

$('a', '#nav').hover(function() {
         if(!$(this).parent().hasClass('current')) {
                 $(this).stop().animate({
                         backgroundPosition: '(0 -75px)'
                 });
         }
 }, function() {
         if(!$(this).parent().hasClass('current')) {
                 $(this).stop().animate({
                         backgroundPosition: '(0 -0)'
                 });
         }
 });

Slides up and down the background image of a link when rolled over. Requires background position plugin.

Subscribe to The Thread

  1. Emy says:

    this is amazing.thanks for sharing

  2. Steven Braun says:

    The reference url has gone 404 on September 28, 2010.

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---