¿Hay alguna forma de aumentar/reducir una imagen al desplazarse con Jquery?

¿Hay alguna manera, utilizando Jquery para crecer y luego reducir una imagen (con animación para que parezca suave) al desplazarse sin afectar demasiado el diseño (supongo que el relleno tendría que reducirse y luego crecer también).¿Hay alguna forma de aumentar/reducir una imagen al desplazarse con Jquery?

Con un poco de perder el tiempo, finalmente se me ocurrió la solución, gracias a todos los que ayudaron.

<html> 
<head> 
<style type="text/css"> 
    .growImage {position:relative;width:80%;left:15px;top:15px} 
    .growDiv { left: 100px; top: 100px;width:150px;height:150px;position:relative } 
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

</head> 
<body> 
<div class="growDiv"> 
     <img class="growImage" src="image.jpg" alt="my image"> 
</div> 

<script type="text/javascript"> 

$(document).ready(function(){ 

    $('.growImage').mouseover(function(){ 
     //moving the div left a bit is completely optional 
     //but should have the effect of growing the image from the middle. 
     $(this).stop().animate({"width": "100%","left":"0px","top":"0px"}, 400,'swing'); 
    }).mouseout(function(){ 
     $(this).stop().animate({"width": "80%","left":"15px","top":"15px"}, 200,'swing'); 
    });; 
}); 
</script> 
</body></html>

Fuente

2009-05-19 Kris Erickson

Si usted tiene su imagen a una posición absoluta en el documento CSS, el resto del diseño de la página no debe cambiar cuando se anima su imagen .

Debería poder usar la función animada() de jQuery. El código sería algo como esto:

$("#yourImage").hover(
    function(){$(this).animate({width: 400px, height:400px}, 1000);},   
    function(){$(this).animate({width: 200px, height:200px}, 1000);} 
);

Este ejemplo crecería la imagen con id = yourImage a 400 píxeles de ancho y de alto cuando ratón por encima, y traerlo de vuelta a 200 píxeles de ancho y de alto cuando termina el vuelo estacionario. Dicho esto, su problema radica más en HTML/CSS que en jQuery.

Fuente

2009-05-19 15:49:50

olvidó agregar comillas. esto debería ser "ancho" y "400px" y así sucesivamente. –

No se puede usar jQuery de animate para aplicar esa? Con un poco de retoques, debería ser un chasquido.

Fuente

2009-05-19 15:38:47 karim79

El aumentar y reducir las operaciones son fáciles con .animate:

$("#imgId").click(function(){ 
    $(this).animate({ 
    width: newWidth, 
    height: newHeight 
    }, 3000); 
});

El problema es cómo hacerlo sin cambiar el diseño de la página. Una forma de hacerlo es con una copia que se coloca absolutamente sobre el contenido. Otro podría ser colocar absolutamente la imagen dentro de un div relativo de tamaño fijo, aunque IE podría tener problemas con eso.

Aquí es una biblioteca existente de que parece hacer lo que estás pidiendo http://justinfarmer.com/?p=14

Fuente

2009-05-19 15:39:59 Keith

el enlace está muerto. – mmdanziger

Si realmente quiere decir "sin afectar el diseño", debe concentrarse más en el CSS que en el javascript.

El javascript involoved ya ha sido publicado aquí ... pero para asegurarse de que su diseño no se arruine, necesitará eliminar su imagen del flujo del diseño.

Esto se puede hacer ubicándolo de manera absoluta y configurando su índice z en un valor mayor. Sin embargo, esta no es siempre la solución más limpia ... así que recomendaría jugar con "posición: relativa" en el elemento DOM principal y "posición: absoluta" en el estilo de la imagen.

La interacción de relativo y absoluto es bastante interesante. Debes googlearlo.

aplausos, JRH

Fuente

2009-05-20 05:24:32 jrharshath

uno puede cerrar la imagen en un div (o cualquier elemento html que usted piensa es apropiado, etc li) con desbordamiento Es configurado como oculto. Luego use jQuery .animate para hacer crecer ese div, de la manera que desee.

Así por ejemplo, el html podría ser

<div class="grower"> 
    <img src="myimg.jpg" width="300" height="300" alt="my image"> 
</div>

Luego, su css se vería

.grower {width:250px;height:250px;overflow:hidden;position:relative;}

Así se recorta la imagen esencialmente por el div, que luego se puede crecer en cualquier evento para revelar el tamaño completo de la imagen usando jQuery

$('.grower').mouseover(function(){ 
    //moving the div left a bit is completely optional 
    //but should have the effect of growing the image from the middle. 
    $(this).stop().animate({"width": "300px","left":"-25px"}, 200,'easeInQuint'); 
}).mouseout(function(){ 
    $(this).stop().animate({"width": "250px","left":"0px"}, 200,'easeInQuint'); 
});;

Nota: Es posible que desee agregar en css adicional en sus js, al igual que un mayor índice z a su div para que pueda crecer sobre el diseño etc

Fuente

2009-06-17 10:25:29

Esto está cerca, pero recorta la imagen en lugar de redimensionarla. –

quería publicar una solución simple I estoy usando en base a esta publicación y la información de Fox's answer a una pregunta relacionada.

El uso de un <img> así: <img style="position: absolute;" class="resize" />

Puede hacer algo similar a lo que hay a continuación. Tomará el ancho + alto actual de la imagen, lo hará 3 veces más grande al pasar el mouse (current * 3) y luego lo regresará al mouse.

var current_h = null; 
var current_w = null; 

$('.resize').hover(
    function(){ 
     current_h = $(this, 'img')[0].height; 
     current_w = $(this, 'img')[0].width; 
     $(this).animate({width: (current_w * 3), height: (current_h * 3)}, 300); 
    }, 
    function(){ 
     $(this).animate({width: current_w + 'px', height: current_h + 'px'}, 300); 
    } 
);

Los current_X las variables son globales para que sean accesibles en la acción del ratón-out.

Fuente

2011-07-08 04:24:24 drewjoh

Si bien este es solo un método simple. Si el usuario mueve el mouse rápidamente atrás y adelante sobre la imagen, la imagen seguirá expandiéndose. Deberá restablecer las dimensiones por completo en 'mouseout'. – Navigatron

- HTML

<div class="container"> 
    <img id="yourImg" src="myimg.jpg"> 
</div>

- JS

$(".container").toggle({ effect: "scale", persent: 80 });

--Más información
http://api.jqueryui.com/scale-effect/

Fuente

2013-08-03 05:05:34 Pinny

¿Hay alguna forma de aumentar/reducir una imagen al desplazarse con Jquery?

Respuesta

Cuestiones relacionadas