How do I “hold” elements underneath jQuery bounce?

Question

jQuery's effects are great, but I've noticed that the remaining elements under the affected element are displaced because of the wrapping divs which cause the effect (visit this demo page and scroll to "The Bouncing Effect" or "The Shake Effect" to see).

How do I hold the rest of the elements in the document steady while the effect plays?

Answer 1

Okay, here's the difference: if you try to animate an element like an anchor DIRECTLY, you end up affecting other flow. If you wrap that same element in a div and animate, it's fine. Look at the difference between jsfiddle.net/ejwh4/4 and jsfiddle.net/ejwh4/5

Answer 2

The exemple you took is not the best. The effect only moves the element you tell it to. As you can see here the other element is not affected by the effect. However the problem that is happening in the demo you took could happen sometimes and you must be carefull. The problem could be caused by poorly positioned elements and animations. If the position of one element (A) depends on the position of an animated element (B), if B moves A will move too somehow.