0

语言：Javascript | jQuery | PHP | HTML5

我要问的是类似于这个问题。

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

我可以使用负边距来实现这一点，这是我迄今为止所拥有的演示。

下面的代码：

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

但问题是，我将它与“悬停”效果一起使用，（悬停时）应该将气泡从中间扩大到 10%。JS 在这里找到。

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

我想要完成的正是它在此页面上的完成方式：https ://www.vizify.com/rand-fishkin

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

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

4

1 回答 1

0

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

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

        });


    });
});
于 2012-11-06T04:10:59.883 回答