jQuery：如何切换圆形div，并从中心开始切换？ （从中心扩展）

Question

语言： Javascript | jQuery | PHP |的 HTML5

我要求的内容与this question类似。

我需要在第一页加载时从中心（而不是从左上角）增加一个“气泡”（圆形的东西）。

我可以使用负边距， demo of what I have so far 来完成此任务。

以下代码：

$(document).ready(function(){   
$('.bubble').animate({
opacity: 1,
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
margin: '-25%'
  }, 800, function() {

但问题是，我正在使用这个“悬停”效果（悬停时）应该将气泡从中间扩展到10％。 JS找到了 here 。

现在，初始页面加载的负边距设置为-25％，因为这是使其居中的唯一方法，但悬停效果使用div的CSS中的边距，该边距不符合-25％边距最初加载了。

我想要完成的是在此页面上完成的工作：https://www.vizify.com/rand-fishkin

• 气泡最初是在页面加载时加载的（从中心扩展）
• 气泡在悬停时生长（从中心扩大当前大小的10％）

我现在很无能为力，我该怎么做才能做到这一点？任何帮助将不胜感激！

Answer 1

我找到了答案，将第二段代码放在内作为回调（加载气泡后）。

$(document).ready(function(){

// LOAD BUBBLES

    $('.bubble').animate({
    opacity: 1,
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    margin: '-25%'
  }, 400, function() {


// NOW, LOAD HOVER EFFECTS

        $(".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.2])
        }, function() {
            $(this).trigger('scale', [1.0])

        });


    });
});