animación de imagen jquery en vuelo estacionario

jquery selector

Question

DE ACUERDO,

Quiero que cuando cierro los elementos <li> que contienen las imágenes, la imagen crezca (al igual que en la imagen de Google en miniatura

<div>
    <ul class="images">
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
    </ul>
</div>

el problema es que si solo animé el li, las otras imágenes se moverán y el diseño se romperá.

aquí está mi jsfiddle si es necesario ... gracias

Answer 1

Aquí puedes encontrar una variedad de complementos para eso. Son buenos complementos.

Answer 2

Creo que necesitas esto

Vea que este es el código de psuedo simple de acuerdo con su requisito, no sabe exactamente cuál es su necesidad.

Código jQuery

$(''.images img'').on({
    mouseenter: function(){
        $(this).animate({width: ''170px'', height: ''120px'', top: ''-=15px'', left: ''-=15px''}, 500);
    },
    mouseleave: function(){
        $(this).animate({width: ''150px'', height: ''100px'', top: ''+=15px'', left: ''+=15px''}, 500);
    }
});

Ver la demostración en vivo

Answer 3

Tu li debe estar relativamente posicionado, y contener un elemento absolutamente posicionado dentro de él. El estado " li hover" hará que este otro elemento se expanda, pero como son "posición: absoluta", no afectará el otro posicionamiento de li .

Me gusta (pseudo-código):

li{width:150px; height:100px; position:relative}
li span{width:150px; height:100px; position:absolute; top:0; left:0; display:block}
li:hover span{width:200px; height:150px; top:-25px; left:-25px}

También puede cambiar el atributo src su img para cargar miniaturas minúsculas e imágenes detalladas más grandes al pasar el mouse, mediante javascript.

Si necesita animación, solo agregue jQuery Animate a eso.

• Violín en css puro

Answer 4

$("li").hover(function() {
    $("img").css({''height'':''200px'', ''width'':''300px''});
});

Algo como esto, tal vez?

Answer 5

Finalmente encontré una manera más fácil de animar la imagen sin jQuery, solo con la transición de CSS3:

img
{
    width: 90%;
    height: 90%;
    -webkit-transition: max-width 0.5s, height 0.5s;
       -moz-transition: max-width 0.5s, height 0.5s;
          o-transition: max-width 0.5s, height 0.5s;
            transition: max-width 0.5s, height 0.5s;
}

img:hover
{
        width: 120%;
    height: 120%;
}