Ir al contenido principal

Uso de la función animate de jQuery para la animación de menús

   Con la función 'animate' de jQuery podemos realizar, de forma sencilla, una animación de, por ejemplo, nuestros menús, con unas pocas lineas de código. En esta página podéis ver el ejemplo talleresguadamia. Para realizar el ejemplo tenéis que descargar, e incluir en el 'head' de vuestra página este plugin jquery_plugin_color que extiende la función 'animate' al color. Esto es así porque el 'animate' original de jQuery sólo nos permite animar aquellas propiedades css numéricas. Como, por ejemplo, el padding, margin, width, etc... Añadiendo este plugin, también el color. El código del ejemplo es el siguiente:

function animaenlaces(){
    enlace=$('a.but');  //recogemos en la variable qué enlaces queremos animar

    $color=enlace.css('color');  //en la variable '$color' guardo el color original

           enlace.hover(function() { //ejecutamos la función cuando el puntero esté    encima del enlace

            $(this).animate({ paddingTop: '5px' }, 100); //sobre el enlace en el que estamos ('this') cambiamos el valor de padding

            $(this).animate({color:"#FFF"},100) //y también el color

    }, 
         function() { //ejecutamos esta función cuando el puntero salga fuera

            $(this).animate({color:$color},100);  //devolvemos el color original ($color)

            $(this).animate({ paddingTop: 0 }, 100); //y el padding original (cero)
    });
}

   Fácil ¿no?. Sólo recordad un par de cosas: 'hover' permite más de una función en sus argumentos, la primera se ejecuta cuando el puntero del ratón está encima del elemento seleccionado y la segunda cuando sale fuera sería algo como:
   $('mi id o class').hover(function(){código puntero encima}, function(){código puntero fuera})

La segunda cosa a recordar, y muy importante, es que tenemos que devolver primero el color original antes que el padding, en la segunda función, sino se nos quedarán los enlaces (o lo que sea) del color que cambiamos (blanco en este caso). Esto ocurre si pasamos el puntero del mouse rápido y repetidamente por encima.

Comentarios

Entradas populares de este blog

Leer un archivo XML con jQuery y javascript y modificar un HTML con su contenido

   Una manera muy interesante y fácil de modificar los textos de tu página web. Si, por ejemplo, tenemos una página donde cambiamos a menudo unas noticias que tenemos en el margen derecho, podríamos tener un código HTML como este:    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Manejar archivo XML</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="leerxml.js"></script> <link rel="stylesheet" href="estilos.css"> </head> <body> <h1>Titulo de la página</h1> <div id="derecha"> <div class="noticias"> <div class="prim

Recargar div con efecto de aparición suave (Fade In) en jQuery

  En este post continúo con el código que describí en el segundo post sobre cómo refrescar un div sin necesidad de refrescar toda la página, pero añadiéndole unas lineas para este se aparezca de forma suave. La página de ejemplo es http://www.talleresguadamia.com y el código es el que sigue: <script type="text/javascript"> $(document).ready(function(){    $("#contenido a").each(function(){       var href = $(this).attr("href");       $(this).attr({ href: "#"});       $(this).click(function(event){                  $("#contenido").css("display","none");          $("#contenido").load(href).fadeIn(700);        });    }); });; </script>   Podéis ver lo fácil que es. Hemos agregado sólo dos cosas:   - La linea  "$('#contenido').css('display','none')", que lo único que hace es cambiar la propiedad css "display" del div "#contenido&q

Código jQuery para ver una imagen al pasar el ratón sobre un enlace.

   Voy a explicar un código en jQuery , para que, al pasar el puntero del mouse sobre un enlace o, en este caso, sobre un texto cualquiera (sin necesidad de ser un enlace), se nos muestre una imagen cerca del enlace y que esta desaparezca al retirar el puntero del mouse (sin necesidad de hacer click sobre él). Podéis pensar que me estoy repitiendo con un anterior post. Casi que si. Pero la diferencia es que, en este caso, no sabemos donde estará situada la imagen. Es decir que, dependiendo de la situación de la pantalla donde esté el enlace o texto, allí se mostrará la imagen.    Vamos al grano. Primero el código en HTML:       <span class="enlace" title="hyneria.png">Hyneria</span>    Podéis ver que, en este caso, no se trata de un enlace. Le pongo el nombre de 'enlace' a la clase porque en el CSS le doy apariencia de enlace. Aquí lo importante es 'title' el cual contiene el nombre de la imagen que queremos mostrar (pod