Question

我在div中有一个圆形背景图像。首先，我需要不要显示“气泡”。到达那个页面后，气泡会像气泡一样生长到位，换句话说就是“流行”到位。我不知道如何在jquery中创建它。这也需要适用于所有浏览器，包括ie7 +任何帮助都会感激不尽

Answer 1

这些应该会给你一个想法。您也可以考虑使用图像来说明您想要实现的目标。

我建议您构建所需的内容，然后询问人们如何更改内容以获得所需的结果。这对人们来说更容易回答。

Answer 2

对于弹出效果，您真的需要为4种不同的样式制作动画，根据您的CSS偏好，您可以为顶部和左侧设置动画，或者如果您正在使用边距（为什么？）margin-top和margin-left，这将为您提供“泡沫”向外扩展中心的效果，而不是从左上角到右下角。

这是top / left

的jQuery示例

var newHeight = 300;
var newWidth = 300;

jQuery('#element').animate({
    "top":newHeight/2,
    "left":newWidth/2,
    "height":newHeight,
    "width":newWidth,
    "opacity":1
}, 'fast', easeInOutCirc);

您可以在此处找到缓动效果：http://gsgd.co.uk/sandbox/jquery/easing/

值得注意的是你应该对你的问题更具体一点，我们不介意读者：）

Answer 3

这是this fiddle的简化版本，我做了一些非常类似于你正在做的事情。希望它有所帮助。

function(){
    var position = $('#bubbleposition'),
        bubble = $('#bubble'),
        startRadius = 200,
        newRadius = 400,
        startleft = 10,
        starttop = 10,
        endleft = 50,
        endtop = 50;
    position.css({left: startleft, top: starttop, 10)});
    bubble.css({height: startRadius, width: startRadius});
    position.animate({left: endleft, top: endtop});
    bubble.animate({height: newRadius, width: newRadius}, 400);
}

<div id='bubbleposition'>
    <div id='bubble'>
        Hello!
    </div>
</div>

创建一个可以像泡沫一样增长的div

3 个答案: