0

Добрый день/вечер.

На мой взгляд, достаточно сложный вопрос. Имеется div, нужно для jquery события hover прописать animate изменение высоты, ширины и позиции (top и left), когда же блок теряет курсор возвращать высоту, ширину и позицию обратно. В общем-то с этим проблемы нет, вот как я это сделал:

$('#button').hover(function () {
    $('#button').animate({
        width: '+=20px',
        height: '+=20px',
        left: '-=10px',
        top: '-=10px'
    }, 200);
}, function () {
    $('#button').animate({
        width: '-=20px',
        height: '-=20px',
        left: '+=10px',
        top: '+=10px'
    }, 200);
})

Собственно вот в чем вопрос: мне нужно изменять все величины не в пикселях, а в процентах. Помогите, пожалуйста.

P.S. Немного поясню, зачем нужно позиционирование: блок увеличивается, а его центральная точка остается неизменной. Как-то так.

Пример: http://jsfiddle.net/2ZHzR/10/

2
  • 1
    Пример на jsFiddle закиньте. Потому как ваш код, какой-то загадочный, а когда дошёл до слов "*Немного поясню ... *", то совсем стало грустно.
    – Deonis
    28 авг 2012 в 14:58
  • Вот jsfiddle.net/2ZHzR/10 28 авг 2012 в 15:21

1 ответ 1

3

По-моему, это не сложно. Переделаю ваш пример под проценты:

var w = $(this).width(),  //ширина картинки
    h = $(this).height(), //высота картинки
    zoom = 0.5; //зум картинки. это означает увеличение на 50%

$(this, '#buttons a').animate({
    width: w+w*zoom,
    height: h+h*zoom,
    left: "-="+(w*zoom/2),
    top: "-="+(h*zoom/2)
}, 200, 'easeOutElastic');
},
function () {
    $(this, '#buttons a').animate({
        width: w,
        height: h,
        left: "+="+(w*zoom/2),
        top: "+="+(h*zoom/2)
    }, 200, 'easeOutElastic');

Вот переписал первый попавшийся в гугле пример под процентное увеличение мой пример (пример из гугла с абсолютным смещением)

Вот, собственно, ваш пример переделанный на фидле

3
  • Прошу прощения, еще один вопрос по этой теме. Если быстро водить курсором по всем объектом, то они "ломаются" и смещаются. Причем в этом примере /superdit.com/2011/06/11/hover-image-zoom-with-jquery/ все ок. Как это исправляется? 29 авг 2012 в 4:59
  • Я предполагаю, что это из-за процентного измерения. 29 авг 2012 в 5:01
  • Ха! Проблема решена: $(this).stop(true, true); 29 авг 2012 в 7:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.