2

我正在研究一个简单的动画，它应该以隐藏的元素和爆炸效果结束，然后文本变得可见。

这是带有代码和动画的jsfiddle 。

这里调用了爆炸：

jQuery('.bubble1').on('click', function () {
 jQuery(this).hide('explode', { pieces: 16 } , 1000, function() { jQuery('.mytext').show(); } );
});

问题是爆炸动画只在似乎只是元素的一半或位置改变的东西上执行，结果不是我想要实现的。

关于可能的解决方案的任何建议？

4

2 回答 2

2

问题是元素的初始位置仅由 css 规则给出，如下所示：

.bubble1 {
  border: 2px solid #000;
  border-radius: 100px;
  height: 100px;
  width: 100px;
  position: absolute;
  bottom: -104px;
  left: 50%;
  margin-left: -52px;
}

将页面中的元素居中的边距规则使动画行为不正确。

为了在不使用复杂计算或复杂脚本的情况下解决这个问题，我更改了移动的初始位置，而不是使用保证金规则：

var bezier_params = {
  start: {
    x: jQuery('.bubble1').offset().left-52,
    y: jQuery('.bubble1').offset().top,
  },
  end: {
    x: jQuery('.bubble1').offset().left-52,
    y: 110,
  }
}

通过从元素总宽度（宽度+边框）的一半位置移除，元素在页面中正确居中。

于 2013-01-18T11:20:09.183 回答
0

问题来自您在 CSS 中设置margin爆炸元素。你应该改变left财产。

JSFIDDLE 只是一个示例，您必须找到准确的左值以使元素居中。 http://jsfiddle.net/2TKta/45/

于 2013-01-18T11:09:59.403 回答