CODEWITHSUNDEEP
jqueryhtmltransitionjquery-hover
Mafia
Mafia

Reputation: 792

jQuery: How to add transition on hover, div's BORDER-RADIUS & MARGIN?

Language: Javascript / jQuery / PHP

What I am trying to accomplish, is similar to the hover effect that you see on this page's bubbles:
https://www.vizify.com/rand-fishkin

I have accomplished a similar effect using CSS3, but the transition was not as smooth as the one on that page, so I opted with using Javascript instead.

What I'm doing here is I grow the width & height of the div bubble by 10% when hovered.

But I do not know how to adjust the border-radius and margin by percentage?

$(".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' });
});

Upon hover :

Enough yapping, here is a demo reflecting what I've done so far.

Currently, I am using a fixed border-radius of 300px (larger than the div itself) to keep the div rounded even when hovered, and I am changing the margin in a static way (not based on percentage).

Since I am adding the grow transition based by percentage, I cannot do a static border-radius or static margins for the hovered div.

My question is, how do I specify border-radius & margins by percentage?

If this is how you expand the width by 10%: width: $.data(this,'size').width*1.1
How do you set the margin by 1/8 of the current height?

I have stumbled upon this post that kind of is doing what I want: https://stackoverflow.com/a/3630768/1399030 (dividing & outputting based on percentage)

Thanks so much, all assistance is really appreciated!

Upvotes: 1

Views: 901

Answers (1)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

Love,

Try this:

$(".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])
});

DEMO

NOTES

  • By providing an excessive border-radius in the style sheet (eg. equal to width), circularity is guaranteed(?) without needing to scale it. I think this will work in all browsers but needs testing.
  • To avoid repetition of code, I implemented the scaling algorithm as a handler of the custom event 'scale'.
  • Margin scaling keeps bubble centred on its original centre.
  • You will see in the demo that the bubble is wrapped in a static container that reserves space into which the bubble can expand. This will prevent the whole page needing to reflow as the bubble grows/shrinks. Other approaches are available, eg absolute positioning.

Upvotes: 1

Related Questions