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

语言：JavascriptjQueryPHPHTML5

我所要求的和你的相似

我需要在第一页加载时从中间（而不是从左上角）长出一个“气泡”（圆形）

我可以使用负边距，来实现这一点

代码如下：

$（文档）.ready（函数（）{
$（'.bubble'）。设置动画({
不透明度：1，
宽度：[“切换”、“摆动”]，
高度：[“切换”、“摆动”]，
利润率：'-25%'
}，800，函数（）{

但问题是，我在使用“悬停”效果的同时还使用了“悬停”效果，它（在悬停时）应该将气泡从中间扩展到10%

现在，初始页面加载的负边距设置为-25%，因为这是将其居中的唯一方法，但悬停效果使用div的CSS中的边距，该边距与初始加载的-25%边距不一致

我试图实现的正是如何在本页上完成的：

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

---

我现在不知道该怎么做？如果有任何帮助，我将不胜感激。

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

$(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])

        });


    });
});