проблема с функцией .blur с использованием jquery

Question

У меня есть приложение, которое масштабирует изображение на focus() и масштабирует его на blur(). Я прочитал исходный размер изображения и добавил 15px к нему, чтобы создать эффект увеличения, который отлично работает. Проблема заключается в эффекте уменьшения масштаба, когда я пытаюсь передать исходный размер изображения, который я прочитал, .blur(), но не повезло. Может ли кто-нибудь помочь мне решить эту проблему?

Answer 1

Here is a working demo следующего кода.

Во-первых, вы не вызывая $.data() метод на orgW и orgH в вашей .blur() функции. Кроме того, я изменил свою .blur() функцию, чтобы иметь аналогичную реализацию для вашей .focus() функции для того, чтобы получить трансфокатор к работе:

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

Вы также можете использовать '+=15' и '-=15' в функции анимации. Нет необходимости хранить ширину и высоту.

$('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: Теперь он должен работать.