Problem mit der .blur -Funktion mit jQuery

Question

Ich habe eine Anwendung, die das Bild vergrößert focus() und zoomt weiter blur(). Ich habe die ursprüngliche Bildgröße gelesen und 15 Pixel hinzugefügt, um den in Kraft getretenen Zoom zu erstellen, der einwandfrei funktioniert. Das Problem ist der Zoom -Out -Effekt, in dem ich versuche, die ursprüngliche Bildgröße zu übergeben, zu der ich gelesen habe .blur() Aber ohne Glück. Könnte mir jemand helfen, dieses Problem zu lösen?

Answer 1

Hier ist eine funktionierende Demo des folgenden Code.

Zuerst haben Sie das nicht angerufen $.data() Methode auf orgW und orgH in deiner .blur() Funktion. Außerdem habe ich deine verändert .blur() Funktionieren Sie eine ähnliche Implementierung wie Ihre .focus() Funktion, um den Zoom zur Arbeit zu bringen:

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

Sie können auch verwenden '+=15' und '-=15' in der Animationsfunktion. Keine Notwendigkeit, Breite und Höhe zu speichern.

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

Bearbeiten: Jetzt sollte es funktionieren.