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

Algunas Fotos de Chilpancingo

Comparto varias fotos que tome en diversos lugares de Chilpancingo, las he tomado con mi celular por eso la calidad es regular, sin mas aquí dejo las fotos, y recuerden mencionar de donde las obtuvieron si desean utilizarlas.

Visita al Zoológico de Chilpancingo Zoochilpan

Visite en días pasados el Zoológico de Chilpancingo que lleva por nombre Zoochilpan, no es muy grande pero se disfruta recorrerlo y mirar las diferentes especies de animales que tienen en exhibición, aquí comparto cuatro fotos que tome espero les gusten.

Para mas información visiten la siguiente dirección: http://guerrero.gob.mx/articulos/zoologico-zoochilpan/

Musica y Danzas en fandango Guerrerense en Chilpancingo

08 de Febrero del 2014, en la ciudad de Chilpancingo se ha organizado un fandango en la Plaza Primer Congreso de Anahuac donde se dieron cita grupos de danza, así como músicos que amenizaron cantando chilenas de la costa chica de Guerrero, y de igual forma recitaron algunos coplas y por su parte los danzantes se turnaban para subir a las tarimas y hacerlas sonar con fuerza al son de las chilenas, hubo una ambiente familiar y se pudo apreciar el talento de nuestros músicos guerrerenses, aquí dejo algunas fotos que comparto, en estas fotos se puede apreciar el colorido de los trajes que portan las mujeres.