Question

I want to shake an “#error_message” div. I’m doing:

$('#error_message').effect('shake', {times: 2, distance: 5}, 200);

The div gets shaken, the problem is that the div below moves vertically, kind of moves 10 pixels down while the animation is in progress, then it returns back to its position. There is no other JS event attached and “#error_message” is a div (so it’s a block).

Sorry I cannot show html and JS at the moment. Any hints why this could be happening?

Answer 1

Ok this is happening because your errors div needs room to “shake”, so what you need to do, is take this div out of the flow of the rest of your content that follows it.

If your errors div has a fixed height you can do something like this:

<div id="wrapper">
  <div id="error_message>Error content</div>
  <div id="content">rest of your content, other divs etc</div>
</div>

CSS:

#wrapper {
  position: relative;
}

#error_message {
  position: absolute;
  width: 300px;
  height: 100px;
}

#content {
  margin-top; 100px;
  position: relative;
}

It’s really hard to debug something like this because you didn’t provide the code. Perhaps you can create a small sample of your markup and CSS on http://jsfiddle.net?