jQuery: Как добавить переход при наведении курсора, РАДИУС ГРАНИЦЫ И ПОЛЯ div?

Язык: Javascript / jQuery / PHP

То, что я пытаюсь достичь, похоже на эффект наведения, который вы видите на пузырях этой страницы:
https://www.vizify.com/rand-fishkin

Я добился аналогичного эффекта с помощью CSS3, но переход был не таким плавным, как на этой странице, поэтому я решил использовать вместо этого Javascript.

Я делаю здесь Я увеличиваю ширину и высоту пузыря div на 10% при наведении курсора.

Но я не знаю, как настроить border-radius и margin в процентах?

$(".colored-bg").each(function() {
    $.data(this, 'size', { width: $(this).width(), height: $(this).height() });
}).hover(function() {
    $(this).stop().animate({ height: $.data(this,'size').height*1.1, 
                         width: $.data(this,'size').width*1.1,
                         margin: '-13.5px auto' });
}, function() {
$(this).stop().animate({ height: $.data(this,'size').height, 
                         width: $.data(this,'size').width,
                         margin: '-13.5px auto' });
});

При наведении:

  • Я хочу настроить радиус границы, чтобы пузырь оставался круглым даже при наведении курсора (1/2 числа пикселей от высоты / ширины зависшего размера div)

  • Я хочу изменить маржу на 1/8 отрицательных пикселей (размер зависшего div) - динамически - при наведении курсора, чтобы div оставался центрированным по вертикали (чтобы при увеличении он не просто расширялся вниз).

Хватит тявкать, вот демонстрация, отражающая то, что я сделал уже.

В настоящее время я использую фиксированный радиус границы 300 пикселей (больше, чем сам div), чтобы div округлялся даже при наведении курсора, и я изменяю поле статическим способом (не в зависимости от процента).

Поскольку я добавляю переход увеличения на основе процента, я не могу сделать статический радиус границы или статические поля для зависшего div.

У меня вопрос: как указать радиус границы и поля в процентах?

Если это то, как вы увеличиваете ширину на 10%: width: $.data(this,'size').width*1.1
Как вы устанавливаете поле на 1/8 от текущей высоты?

Я наткнулся на этот пост, который делает то, что я хочу: https://stackoverflow.com/a/3630768/ 1399030 (деление и вывод в процентах)

Большое спасибо, вся помощь очень ценится!


html transition jquery jquery-hover
person Mafia    schedule 03.11.2012    source источник
comment
Работа в процентах от текущего значения не будет работать - ни для высоты, ни для ширины, ни для радиуса границы, ни для чего еще. Видите команду .stop()? Это означает, что начальная точка каждой анимации не обязательно является конечной точкой предыдущей анимации. Вам необходимо сохранить начальные значения, например, с .data(), и работать с этими значениями во всех случаях, т.е. если нижний предел равен x, то верхний предел равен x * 1.1.   -  person Beetroot-Beetroot    schedule 03.11.2012
comment
В настоящее время сохраняется ширина и высота (СТРОКА № 2), но есть ли способ сохранить поля и радиус границы div? В jQuery есть $(this).height(), но что можно использовать для полей и радиуса границы? Спасибо за ответ! Я не знаю, как это сделать ... Я нашел 2 ссылки, которые спрашивают почти об одном и том же: stackoverflow.com/a/3630768/1399030 || stackoverflow.com/q/590602/1399030   -  person Mafia    schedule 03.11.2012
comment
Дох! Прошу прощения - я неправильно прочитал код. Вы уже делаете то, что я предлагаю. Я только что проснулась и еще не пила кофе.   -  person Beetroot-Beetroot    schedule 03.11.2012
comment
^ LOL прекрасно понятно! Я пробую другие вещи, как выделить маржу относительно высоты margin: $.data(this,'size').height*1.2 ‹- в настоящее время это просто изменяет маржу на 20% больше, что не имеет никакого смысла, но то, что я пытаюсь получить, - это сделать поле -1/8 пикселей высоты div: margin: X auto. Я понятия не имею, как сделать X динамическим с помощью jQuery.   -  person Mafia    schedule 03.11.2012

Ответы (1)


arrow_upward
1
arrow_downward

Любовь,

Попробуй это:

$(".bubble").on('scale', function(e, s) {
    var data = $.data(this, 'size'),
        w = data.width,
        h = data.height;
    $(this).stop().animate({
        width: w * s,
        height: h * s,
        marginLeft: data.marginLeft - w * (s-1) / 2,
        marginTop: data.marginTop - h * (s-1) / 2
    });
}).each(function() {
    var $this = $(this);
    $.data(this, 'size', {
        width: $this.width(),
        height: $this.height(),
        marginLeft: parseInt($this.css('margin-left')),
        marginTop: parseInt($this.css('margin-top'))
    });
}).hover(function() {
    $(this).trigger('scale', [1.1]);
}, function() {
    $(this).trigger('scale', [1.0])
});

ДЕМО

ПРИМЕЧАНИЯ

  • Обеспечивая чрезмерный радиус границы в таблице стилей (например, равный ширине), гарантируется округлость (?) Без необходимости ее масштабирования. Я думаю, что это будет работать во всех браузерах, но требует тестирования.
  • Чтобы избежать повторения кода, я реализовал алгоритм масштабирования как обработчик настраиваемого события «scale».
  • При масштабировании поля пузырек остается в исходном центре.
  • В демонстрации вы увидите, что пузырек обернут в статический контейнер, который резервирует пространство, в которое пузырек может расширяться. Это предотвратит необходимость перекомпоновки всей страницы по мере увеличения / уменьшения пузыря. Доступны и другие подходы, например, абсолютное позиционирование.
person Beetroot-Beetroot    schedule 03.11.2012
comment
Большое спасибо, я буду использовать это! :) Спасибо за ответ и помощь. - person Mafia; 05.11.2012