Effetto hover con jquery

[lorenzo84]

Salve a tutti.

Volevo sapere come poter realizzare, se possibile, un semplice effetto su un menù al passaggio del mouse.
Ho un <li> di 100px e quando passo con il mouse vorrei che si allungasse a 130px.
E' possibile?

grazie a tutti

 

[criric]

Ciao, puoi anche evitare jquery e usare la proprietà transition dei css3

<style>
    ul {        
        list-style-type: none;
        color:white;
    }
    ul li {
        width: 100px;
        -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
        transition: width 2s;
        background-color: red;
        padding:3px 0;
    }
    ul li:hover {
        width: 130px;
    }
</style>

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

 

[lorenzo84]

Grazie per la risposta. Con jquery sono riuscito a fare questo e sembra funzionare:

$("#menuvert li").on('mouseenter',function(){
		  $(this).animate({"margin-left": "-15px"}, "fast");
		});
		$("#menuvert li").on('mouseleave',function(){
		  $(this).animate({"margin-left": "0px"}, "fast");
		});