Problema con la función .Blour usando jQuery

Question

Tengo una aplicación que se acerca a la imagen focus() y se acerca blur(). He leído el tamaño de la imagen original y le he agregado 15px para crear el zoom en efecto, lo que funciona bien. El problema es con el efecto de zoom en el que estoy tratando de pasar el tamaño de imagen original al que he leído .blur() Pero sin suerte. ¿Alguien podría ayudarme a resolver este problema?

Answer 1

Aquí hay una demostración de trabajo del siguiente código.

Primero, no llamaste al $.data() método sobre orgW y orgH en tus .blur() función. Además, he alterado tu .blur() función de tener una implementación similar a su .focus() función para que el zoom fuera a trabajar:

$('button:has(img)').blur(function() {

    if (timer !== null) clearTimeout(timer);

    var $image = $(this).find('img');

    $image.each(function() {
        $(this).animate({
            'width': $.data(this, 'orgW') + 'px',
            'height': $.data(this, 'orgH') + 'px',
        }, 500);
    });

});

Answer 2

También puedes usar '+=15' y '-=15' En la función de animación. No es necesario almacenar el ancho y la altura.

$('button:has(img)').focus(function() {
    $(this).find('img').animate({
        width: '+=15',
        height: '+=15'
    }, 500);
});

$('button:has(img)').blur(function() {
    $(this).find('img').animate({
        'width': '-=15',
        'height': '-=15'
    }, 0);
});

Manifestación

Editar: ahora debería funcionar.