Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Efecto desvanecer y aparecer con JQuery en imágenes







Hoy os escribo sobre un efecto, que hará desvanecer vuestras imágenes o efecto aparecer, es un truco que usa jQuary, por lo tanto, sí has instalado, Scriptaculous, Prototype o Mootools, seguramente no se pueda usar este efecto. Al pasar el cursor por la imagen está se desvanece o aparece suavemente, para ver un ejemplo de cómo queda este truco, pasa el cursor por la imágenes, la primera imagen es con efecto aparecer y la segunda imagen es, desvanecer, insisto, ver las demos:





Para añadir el primer efecto aparecer, en tu blog, al pasar el cursor en todas la imágenes del blog, añade el siguiente código, siempre antes de la etiqueta </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Sí por lo contrario, quieres añadir el efecto desvanecer, al pasar el cursor en todas la imágenes de tú blog, añade el siguiente código, antes de la etiqueta </head> 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 1.0);
$('img').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});

</script>

Para el efecto aparecer al pasar el cursor, solamente en las imágenes seleccionadas o escogidas, siempre antes de la etiqueta </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.blImagjtef').fadeTo('slow', 0.5);
$('.blImagjtef').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Para el efecto desvanecer al pasar el cursor en las imágenes escogidas, siempre antes de la etiqueta </head> añade el siguiente código de abajo:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.blImaggjtef').fadeTo('slow', 1.0);
$('.blImaggjtef').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>

Los dos últimos códigos, al contrario que los dos primeros (al guardar la plantilla, aplicarán el efecto a todas las imágenes), se aplican de forma manual, utilizando las clases resaltadas en verde (respectivamente), dentro del código de la imagen, de está forma que se ve más abajo en forma de ejemplo, deberás de añadir tu imagen:

<img class='blImagjtef' src='URL DE LA IMAGEN'/>

<img class='blImaggjtef' src='URL DE LA IMAGEN'/>




Aizum Blog, miércoles, agosto 22, 2012


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9