Problemi con .blur funzione utilizzando jQuery

Question

Ho un'applicazione che ingrandisce l'immagine sul focus() e zoom su blur(). Ho letto le dimensioni dell'immagine originale e 15px aggiunto ad esso in modo da creare l'effetto zoom in, che funziona bene. Il problema è con lo zoom out effetto dove sto cercando di passare la dimensione dell'immagine originale che ho letto a .blur() ma senza fortuna. Potrebbe qualsiasi aiutarmi a risolvere questo problema?

Answer 1

Qui è un lavoro demo del seguente codice.

In primo luogo, non sono stati chiamando il metodo $.data() su orgW e orgH nella funzione .blur(). Inoltre, ho alterato la funzione .blur() per avere un'implementazione simile alla funzione .focus() al fine di ottenere il diminuire al lavoro:

$('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

È inoltre possibile utilizzare '+=15' e '-=15' nella funzione di animazione. Non c'è bisogno di larghezza di negozio e l'altezza.

$('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);
});

Demo

EDIT:. Ora dovrebbe funzionare