jQuery: Menu item sliding slightly to the right when mouseover

Question

I assume this is an easy one to make, but I'm not really used to jQuery yet, I've just started to learn.

By CSS, we can write a item:hover class and write left:20px; to apply a slight sliding effect to our menu items e.g <li> Item </li>

Now I want to achieve this in smooth action, namely not appearing suddenly at 20 pixels right but sliding to there. I think animate thing in jQuery is used for such animations, but I'm really bad at jQuery, I don't know where to and in what order I should put the codes. Can you give me a quick example of this? :)

Answer 1

use animate()

 $('li').hover(function(){
      $(this).animate({left:20},2000)
  },function(){
      $(this).animate({left:0},2000)
 });

this will animate all the <li> present in the document.. you can give a class to <li> to be specific.. 2000 is the duration of the animation here

Answer 2

You can use jQuery as pointed out in bipen's answer.

I have some simple CSS for handling hover transitions but as said by mikakun, this will only work for browsers CSS3 check out caniuse for compatible browsers.

li {
    /* put your base styles here */
}

li:hover {
    /* put your new styles here */
    transition:all 300ms ease;
    -moz-transition:all 300ms ease;
    -webkit-transition:all 300ms ease;
    -o-transition:all 300ms ease;
}

This will put a 300ms transition for whatever you specify for the particular elements.

You can see this in action if you have a CSS3 compatible browser:

http://jsfiddle.net/3leven11/7aRhe/