Comentarios en: Crear un hover animado con jQuery

Por: mat

mat — Mon, 21 Sep 2009 20:22:05 +0000

Anieto!
Me encuentro en un embrollo justametne con “hover”, di vueltas por tutoriales, di vuelta el código, pero no consigo que el efecto ande únicamente cuando se posa el mouse encima.

Este es el codigo:

$(document).ready(function() {

spectrum();

function spectrum(){
var hue = ‘rgb(‘ + (Math.floor(Math.random() * 256)) + ‘,’ + (Math.floor(Math.random() * 256)) + ‘,’ + (Math.floor(Math.random() * 256)) + ‘)’;
$(‘#welcome’).animate( { color: hue}, 1000);
spectrum();
}

});

Se agradece una mano!

P.D: Este codigo viene del plugin “jQuery Color Animations”

Por: Gisela

Gisela — Fri, 28 Aug 2009 21:04:00 +0000

hola ya lo modifique gracias, ahora alguien me podria indicar como insertar el html en una plantilla html. gracias.

Por: Gisela

Gisela — Fri, 28 Aug 2009 06:09:07 +0000

Hola soy nueva en esto estoy tratando de añadir este efecto a 4 imagenes pero solo aparecen las imagenes sin ningún efecto. Alguien me pudeindicar que esta mal. he creado tres archivos 1 html, 1 css y 1 js
*******************************************************************
TYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Documento sin título

no sale el efecto mañana continuo
Text.

Text
Text.

********************************************************************************
hover_block.js

// JavaScript Document
$(function() {
$(’ul.hover_block li’).hover(function(){
$(this).find(’img’).animate({top:’182px’},{queue:false,duration:500});
}, function(){
$(this).find(’img’).animate({top:’0px’},{queue:false,duration:500});
});
$(’ul.hover_block2 li’).hover(function(){
$(this).find(’img’).animate({left:’300px’},{queue:false,duration:500});
}, function(){
$(this).find(’img’).animate({left:’0px’},{queue:false,duration:500});
});

});
*******************************************************************************************
hover_block.css

ul.hover_block li{
list-style:none;
float:left;
background: #fff;
padding: 10px;
width:300px; position: relative;
margin-right: 20px; }

ul.hover_block li a {
display: block;
position: relative;
overflow: hidden;
height: 150px;
width: 268px;
padding: 16px;
color: #000;
font: 1.6em/1.3 Helvetica, Arial, sans-serif;
}
ul.hover_block li a { text-decoration: none; }
ul.hover_block li img {
position: absolute;
top: 0;
left: 0;
border: 0;
height: 140px;
width: 258px;
}

Gracias por su ayuda y correciones

Por: Gisela

Gisela — Fri, 28 Aug 2009 04:37:24 +0000

hola sou nueva en esto no me funciona he creado una rchivo js un archivo css y un archivo html pero nada aparecen las cuatro fotos pero sin ningun efcto por favor expliquenm detalladamete como crear el archivo html

gracias

Por: Añade un efecto hover animado con jQuery | Sumolari.com

Añade un efecto hover animado con jQuery | Sumolari.com — Sat, 04 Oct 2008 16:05:39 +0000

[...] Vía Anieto2k. [...]

Por: Ruben

Ruben — Sat, 04 Oct 2008 09:15:21 +0000

He probado el script con Safari y no me funciona, ni siquiera hace nada, lo que le resta puntuacion, le doy un 6

Por: Argh

Argh — Fri, 03 Oct 2008 14:35:54 +0000

“En este código vemos, que estamos cogiendo los elementos del listado”

El verbo, no se separa, del reto de la, frase, con comas. Es muy incorrecto.

Por: Marcelo

Marcelo — Fri, 03 Oct 2008 14:34:27 +0000

Wow! Esta bárbaro! lo que se puede hacer con jQuery! Increible.

Por: Janckos

Janckos — Fri, 03 Oct 2008 12:25:28 +0000

Lo guardare en mis bookmark tools para usarlo pronto , esta genial el efecto!

Por: Son

Son — Fri, 03 Oct 2008 11:34:26 +0000

He llegado un poco por casualidad y me parece que tiene cosas muy interesantes que puedo aprender aunque a primera vista algunas me parecen complicadas