Cómo crear una animación deslizante en el menú desplegable con jQuery?

Question

Lo he visto en muchos sitios web, pero no estoy seguro si podré explicarlo.

A veces hay elementos en la navegación de deslizamiento, al igual que la flecha debajo de los elementos de menú que se desliza cuando el usuario se desplaza sobre diferentes enlaces del menú etc.

Aquí hay un menú sencillo:

<ul> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link number 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    <li><a href="#">Link something 4</a></li> 
    <li><a href="#">Link 5</a></li> 
</ul> 

Y algunos jQuery (sé que voy a ser capaz de conseguir el mismo efecto con una simple css: flotar):

jQuery('ul li a').hover(function() { 
    jQuery('a').removeClass('active'); 
    jQuery(this).addClass('active'); 
}); 

Además, jsFiddle de trabajo:

http://jsfiddle.net/8EvhK/

El fondo de los botones se pone rojo al pasar el cursor sobre él. Quiero que este fondo se deslice y se transforme (ancho) entre estos botones mientras controlo.

¿Cómo hacer algo como eso? He estado buscando tutoriales, pero no tuve suerte.

¡Muchas gracias!

Answer 1

1. añadir un elemento al menú usando jQuery de append.

   $('ul').append('<div id="slider"></div>'); 
   

2. En hover de cualquier elemento de menú, animate este nuevo elemento a la horizontal y positionwidth del elemento de menú, que generó el evento.

   $('ul li a').hover(function(){ 
   
       var left = $(this).parent().position().left; 
       var width = $(this).width(); 
   
       $('#slider').stop().animate({ 
        'left' : left, 
        'width' : width 
       }); 
   }); 
   

3. Restablezca el control deslizante a su estado inicial.

   var left = $('ul li:first-child a').parent().position().left; 
   var width = $('ul li:first-child a').width(); 
   $('#slider').css({'left' : left, 'width' : width}); 
   

4. Agregue un poco de CSS.

   #slider { 
       position:absolute; 
       top: -5px; 
       left: 0; 
       height: 100%; 
       width: 0; 
       padding: 5px 15px; 
       background-color: #f00; 
       z-index:-1; 
   } 
   

Aquí es un violín de trabajo: http://jsfiddle.net/5wPQa/2/

Answer 2

se puede lograr este efecto con CSS transitions:

ul li { 
    display:block; 
    padding: 5px 15px; 
    background-color: #333; 
    color: #fff; 
    text-decoration: none; 
    width:50%; 
    -moz-transition: width 1s; /* Firefox 4 */ 
    -webkit-transition: width 1s; /* Safari and Chrome */ 
    -o-transition: width 1s; /* Opera */ 
} 

ul li:hover{ 
    width:100%; 
} 

Here is an example.