jQuery animation glitch?

Question

Here is a fiddle of the problem. I have a span with display: inline-block that contains another span, which I am slowly hiding. At the end, the container span momentarily "jumps back" to its initial position.

Is this a bug, or the expected behaviour?

Answer 1

The problem is when the animated (calculated) width becomes lower than 1px, the browser (at least my chrome) won't render that fraction, and the #text element snaps back to its original width. You can view this behaviour if you increase the animation time to something very big (e.g. 25s) and watch the css-values in the console.

If you try this:

$('#text').delay(1000).animate({
    width: 1,
    height: 1,
    opacity: 0
}, 5000, function () {
  $(this).hide();
});

You'll get nearly the same animation without the snapping.