Comentarios en: Añade un efecto hover animado con jQuery http://sumolari.com/anade-un-efecto-hover-animado-con-jquery/ Proyectos de un amante de la informática Thu, 05 Jan 2012 15:48:26 +0000 hourly 1 http://wordpress.org/?v=3.3.2 Por: Sumolari http://sumolari.com/anade-un-efecto-hover-animado-con-jquery/comment-page-1/#comment-5484 Sumolari Fri, 28 Aug 2009 07:54:31 +0000 http://sumolari.com/?p=369#comment-5484 Bien, el problema que tienes es que has modificado el código HTML original y no has adaptado el CSS ni jQuery para que funcione. Si quieres evitar problemas te recomiendo que uses el código HTML que aparece en el artículo. Bien, el problema que tienes es que has modificado el código HTML original y no has adaptado el CSS ni jQuery para que funcione.

Si quieres evitar problemas te recomiendo que uses el código HTML que aparece en el artículo.

]]> Por: Gisela http://sumolari.com/anade-un-efecto-hover-animado-con-jquery/comment-page-1/#comment-5483 Gisela Fri, 28 Aug 2009 06:54:47 +0000 http://sumolari.com/?p=369#comment-5483 EL CONTENIDO DEL HTML : Documento sin título <a href="/" rel="nofollow"> no sale el efecto mañana continuo</a> <a href="/" rel="nofollow"> Text.</a> <a href="/" rel="nofollow"> Text</a> <a href="/" rel="nofollow"> Text.</a> EL CONTENIDO DEL HTML :

Documento sin título

no sale el efecto mañana continuo

Text.

Text

Text.

]]> Por: Gisela http://sumolari.com/anade-un-efecto-hover-animado-con-jquery/comment-page-1/#comment-5482 Gisela Fri, 28 Aug 2009 06:49:43 +0000 http://sumolari.com/?p=369#comment-5482 Hola sou 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 ******************************************************************************** Documento sin título <a href="/" rel="nofollow"> efecto mañana continuo</a> <a href="/" rel="nofollow"> Text.</a> <a href="/" rel="nofollow"> Text</a> <a href="/" rel="nofollow"> Text.</a> ******************************************************************************** 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 Hola sou 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

********************************************************************************

Documento sin título

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

]]>