У меня есть приложение, которое масштабирует изображение на focus()
и масштабирует его на blur()
. Я прочитал исходный размер изображения и добавил 15px к нему, чтобы создать эффект увеличения, который отлично работает. Проблема заключается в эффекте уменьшения масштаба, когда я пытаюсь передать исходный размер изображения, который я прочитал, .blur()
, но не повезло. Может ли кто-нибудь помочь мне решить эту проблему?проблема с функцией .blur с использованием jquery
ответ
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);
});
});
эй спасибо большое :) ваш код мне очень помог – rashmi
Вы также можете использовать '+=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);
});
EDIT: Теперь он должен работать.
Ваша демонстрация уменьшает ширину double на каждом 'blur()', но я не уверен, почему. Протестировано в Chrome 9. – mVChr
Да, я заметил то же самое. Я не уверен, почему, потому что, согласно api, он должен работать нормально. EDIT: Да, проблема в том, что анимация должна пройти весь путь до вызова размытия. – anssias
перейдите к своему демо и вставьте код css, html и jQuery в соответствующий редактор, указанный jsFidle. – Vivek