Question

How do I say, slide an element a few pixels to the side from its initial position using jQuery? I know there is an animate() function but I have no idea how to use it.
Tips, tutorials would be appreciated.

EDIT:

I am now trying to change the background color of an element on mouseover (I would also like to swap background images eventually, but that’s not for now…)

I’m currently using the following code. what’s wrong? (.link is a class referring to a bunch of a elements)

  //light up links on  mouseover
  $(".link").mouseover(function(event){           
    $(this).animate({'color' : '#000099'}, "fast");
  });

  //dim link on mouseout
  $(".link").mouseout(function(event){       
    $(this).animate({'color' : '#efefef'}, "fast");                
  });

Answer 1

First, read the documentation for animate.

Then, you must define the element you are trying to move to have its position attribute set to relative or absolute via CSS or jQuery.

If you set it to relative, you can just supply the amount of pixels you want to move it with:

// Will move #element right 10 pixels in 500 milliseconds
$('#element').animate({
    left: 10px
}, 500);

If you chose absolute positioning, you must first work out the starting position of the element using .offset().left and add the desired amount of pixels to that, then animate to that position. For example:

// Will move #element right 10 pixels in 500 milliseconds
$('#element').animate({
    left: $('#element').offset().left + 10
}, 500);

This works if the #element’s parent elements are statically positioned (otherwise the offset().left doesn’t match with the absolute left value).