jQuery:如何切换一个圆形div，并开始从中心切换？(从中心展开)
jQuery:如何切换一个圆形div，并开始从中心切换？(从中心展开)
提问于 2012-11-05 09:23:11
语言：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% )。
我现在毫无头绪，我该怎么做呢？任何帮助都将不胜感激！
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-11-06 04:10:59
我找到了答案，将代码的第二个片段放在中作为回调(在加载气泡之后)。
$(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])
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13229134
复制相关文章
相似问题
腾讯云开发者
