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 a

Solution 1:

Love,

Try this:

$(".bubble").on('scale', function(e, s) {
    vardata = $.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.