Efecto jQuery con botones tipo "slide"

[JessicaTJ]

Hola chicos, esta vez les traigo una preguntita relacionada a jQuery, espero puedan ayudarme porke estoy hecha bolas con esto

Veran, estoy intentando hacer algo asi:



Como pueden ver, serian 2 botones, colocados uno enseguida del otro en un DIV contenedor, ahora, cuando pasen por arriba de un boton, ke este se "deslize" hacia arriba, algo asi:



Y al kitar el hover del boton 1 y al pasar encima del 2 haga esto:



Pero ke todo tenga animacion "fluida" con jquery, algo como deslizar hacia arriba cuando se pasa el mouse sobre un boton y deslizar hacia abajo cuando se kita el raton del boton, es posible ke alguno de ustedes chicos me hiciera el gran favor de ayudarme con eso?

De corazon agradecere mil su ayuda chicos !!!!!

[gonza_06]

Código HTML:

<ul id="menu">
  <li>boton 1</li>
  <li>boton 2</li>
</ul>
 

Código Javascript:

$('#menu li').each(function(){
  $(this).hover(function(){
    $(this).addClass('here')
  },function(){
    $(this).removeClass('here')
  })
})
 

eso ahce que al pasar el mouse le agrege la clase here luego modificas el aspecto con css ;)

[JessicaTJ]

Hola gonza_06

Mil mil gracias !!!!! Lo tratare de implementar y te cuento como me va ^-^

[JavierB]

Hola JessicaTJ

Muevo tu tema al foro de Frameworks y Plugins Javascript desde Javascript.

Saludos,

[JessicaTJ]

Bueno, puse esto:

Código Javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
<script>
$('#menu a').each(function(){
  $(this).hover(function(){
    $(this).addClass('linkhover')
  },function(){
    $(this).removeClass('linkhover')
  })
})
</script>
 

El CSS:

Código CSS:

<style type="text/css">
#menu {
    width: auto;
    height: auto;
    margin-top: 50px;
}
 
.link {
    display: block;
    height: 60px;
    width: 100px;
    float: left;
    background-image: url(botoncito.png);
    background-repeat: no-repeat;
    background-position: 0px 30px;
}
 
.linkhover {
    display: block;
    height: 60px;
    width: 100px;
    float: left;
    background-image: url(botoncito.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
</style>
 

Y el HTML:

Código HTML:

<div id="menu">
  <a href="#" class="link"></a>
  <a href="#" class="link"></a>
  <a href="#" class="link"></a>
</div>
 

Pero nu me hace nada, trate de mover el jquery pero nadita, podrian plis decirme ke ta mal?

Mil gracias !!!!

[JessicaTJ]

De nuevo me autorespondo, ya se me esta haciendo costumbre XD XD

Ya pude chicos, use animate(); en vez de addClass(); y removeClass();

Mil gracias de nuevo por su ayuda !!!