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

【问题标题】：jQuery: How to toggle a round div, and start toggle from center? (Expand from center)jQuery：如何切换圆形 div，并从中心开始切换？（从中心展开）
【发布时间】：2012-11-05 09:23:11
【问题描述】：

语言：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%）

我现在一无所知，我该怎么做？任何帮助将不胜感激！

【问题讨论】：

标签： jquery toggle effect pageload

【解决方案1】：

我找到了答案，方法是将代码的第二个 sn-p inside 作为回调（在加载气泡之后）。

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

        });


    });
});

【讨论】：