jQuery 隐藏并爆炸导致位置错误

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,
  }
}

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