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

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

0 голосов
/ 25 января 2011

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

Ответы [ 2 ]

1 голос
/ 25 января 2011

Вы также можете использовать '+=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);
});

Демо

РЕДАКТИРОВАТЬ: Теперь это должно работать.

1 голос
/ 25 января 2011

Вот рабочая демонстрация следующего кода.

Во-первых, вы не вызывали метод $.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);
    });

});
...