Question

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

This is jsfiddle包含代码和动画。

爆炸在这里被称为：

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

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

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

Answer 1

问题是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,
  }
}

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

Answer 2

问题来自于您在爆炸元素上设置CSS margin。您应该改为left属性。

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

jQuery隐藏爆炸结果错误的位置

2 个答案: