Question

I’m working on what is uspposed to be a simple animation that should end with the element hiding with the explode effect an a text becoming visible after that.

This is jsfiddle with the code and the animation.

The explode is called here:

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

The problem is that the explode animation is being executed only on something that seems to be just half of the element or with the position changed, the result is not what I wanted to achieve.

Any suggestion about a possible solution?

Answer 1

The problem was the initial position of the element give by just css rules as follow:

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

The margin rule to center the element in the page was making the animation behave incorrectly.

To fix that without having to use complex calculations or complex scripting, I changed the initial position of the movement instead of using the margin rule:

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

By removing from the position half of the total width of the element (width + border), the element is correctly centered in the page.