problème avec .blur fonction à l'aide jquery

Question

J'ai une application qui effectue un zoom avant sur l'image focus() et effectue un zoom sur blur(). J'ai lu la taille de l'image originale et 15px ajoutée à elle afin de créer le zoom en vigueur, ce qui fonctionne très bien. Le problème est avec le zoom en effet où je suis en train de passer la taille de l'image originale que je vous ai lu .blur() mais pas de chance. Quelqu'un pourrait-il me aider à résoudre ce problème?

Answer 1

Voici un travail démo du code ci-dessous.

Tout d'abord, vous n'étiez pas appel à la méthode $.data() sur orgW et orgH dans votre fonction .blur(). De plus, je l'ai modifié votre fonction .blur() d'avoir une implémentation similaire à votre fonction .focus() afin d'obtenir le zoom arrière au travail:

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

Vous pouvez également utiliser '+=15' et '-=15' dans la fonction d'animation. Pas besoin de largeur de magasin et de la hauteur.

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

Démo

EDIT:. Maintenant, il doit travailler