Efecto de transición en botón con JQuery

Código para generar un efecto de transición al pasar por encima de un botón, lo primero es tener dos imágenes del botón, la primera sera la imagen del botón en un estado normal y el otro botón es la imagen en el estado cuando el cursor del mouse esta encima (evento mousehover).

Los botones serian algo como estos:

Botón que se usara cuando el cursor del mouse pase por encima

Botón que se usara cuando el cursor del mouse este fuera

Ahora el código css

<style type="text/css">
#barraNavegacion{
background-color:#e7e7e7;
height: 60px;
width: 150px;
border: 1px solid #bbb;
}

#boton{
left: 20px;
top: 20px;
position: absolute;
width: 84px;
height: 36px;
background-color: #e7e7e7;
border: 1px solid #7c7c7c;
clip:rect(0,86,38,0);
}

#imagen
{
position: absolute;
left: 0px;
background-color: #e7e7e7;
text-align:center;
padding:2px;
}
#imagen_hover
{
position: absolute;
left: -86px;
background-color: #696969;
text-align:center;
padding:2px;
}
</style>

El código javascript

<script languague="javascript">
$(document).ready(function(){
$('#boton').mouseenter(function(){
$("#imagen").animate({"left": "86px"},500);
$("#imagen_hover").animate({"left": "0px"},500);
});
$('#boton').mouseleave(function(){
$("#imagen_hover").animate({"left": "-86px"},500);
$("#imagen").animate({"left": "0px"},500);
});
});
</script>

El código html

<div id="barraNavegacion">
<div id="boton">
<span id="imagen"><img src="imagenes/inicio.png"></span>
<span id="imagen_hover"><img src="imagenes/inicio-hover.png"></span>
</div>
</div>

El resultado es como se ve a continuación, pasa el cursor del mouse por encima del bóton

Obtener el texto de una celda al hacer clic con JQuery

Código JQuery para obtener el texto o el contenido que exista en una celda de una tabla.

Código JQuery:

<script type="text/javascript">
    $(document).on("ready", function(){                
      $("#area_tabla table tr td").click(function() {
        var celda = $(this);
        alert(celda.html());
      });
    });
</script>

Código HTML:

<div id="area_tabla">
  <table border="1">
    <tbody>
      <tr>
        <td>Contenido 1</td>
        <td>Contenido 2</td>
      </tr>
    </tbody>
  </table>
</div>

Así quedaría, da clic dentro de la celda para ver el resultado

Contenido 1

Contenido 2

Evento Hover con JQuery

Ahora un ejemplo del evento Hover con JQuery, este evento se activa cuando el puntero del mouse pasa por encima del objeto, en la versión de JQuery 1.7 tenemos 3 formas de utilizarlo:

.hover(handlerIn(eventObject)) Se activa cuando el puntero del mouse entra en el área que ocupa el objeto.

.hover(handlerOut(eventObject)) Se activa cuando el puntero del mouse sale del área que ocupa el objeto.

.hover(handlerInOut(eventObject)) Se activa cuando el puntero del mouse entra o sale del área que ocupa el objeto.

Ejemplo:

Pasa el mouse por encima

Codigo

<script type="text/javascript">
//<!CDATA[
    $(document).on("ready",
        function(){    
            $("#btnPruebaHoverIn").hover(function(){
               $('#btnPruebaHoverIn').text("Mouse dentro, ahora sal");          
        }, function(){    
               $('#btnPruebaHoverIn').text("Pasa el mouse por encima");          
        });
    });
//]]>
</script>

Selectores JQuery

Los selectores en JQuery son la forma de acceder a los elementos de DOM HTML, existen varios por lo que explicare algunos y un ejemplo.

selector: $('div')

Aquí accede a todos los div existentes en el documento.

Ejemplo:

<html>
<head>
<title>dataGuerrero</title>
<script src="js/jquery-1.8.1.min.js" type="text/javascript"></script>
<script>
$(document).on('ready',function(){
$('div').css({
'background-color':'#000',
});
});
</script>
</head>
<body>
<div>
<article>
<p>Hola Jquery</p>
</article>
</div>
<div>
<article>
<p>Aprendiendo Jquery</p>
</article>
</div>
</body>
</html>

En este ejemplo si se ejecuta lo que ocurrira es que a todos los div del documento se establece el atributo del color de fondo en negro.

Como utilizar JQuery en blogger

Para utilizar JQuery en blogger, primero necesitamos la librería de JQuery, y que mejor que Google nos proporcione desde su biblioteca esta librería, por lo que:

Paso 1. Visitar el sitio https://developers.google.com/speed/libraries/devguide

Paso 2. Ya estando aquí copiar el código correspondiente a JQuery, este esta en color verde

Paso 3. Pegar entre las etiquetas Head de la plantilla del blog y listo, ya podemos utilizar el JQuery en blogger y con la seguridad que nos brinda Google.

Ya lo que restaría es aprender un poco de JQuery para crear efectos y algunas cosas interesantes que blogger no tenga.