JQuery Shake UI problem

Using jQuery UI's shake effect 开发者_开发百科causes element to run over to the newline, shake, and then run back. I tried changing the position css, etc, but short of hacking it, I feel like there is a normal, elegant solution.

http://jsfiddle.net/ShhER/6/

I want to say it's a bug, but it's probably not...any ideas?

The element being animated should be block level, or have display: block explicitly on it.

I set display: block, and then adjusted the label's css accordingly. It worked fine.

jsFiddle.

I found that jQuery adding wrapper to the element with class ui-effects-wrapper So adding this css solved my problem.

.ui-effects-wrapper {
        display:inline;
    }

I just debug the jQuery UI Shake effect and found that the plugin creates a wrapper to the element that will use the effect. This wrapper is needed in order to apply the jQuery animate function with the Shake given attributes.

I fixed this by adding a with of 100% to the Wrapper. On my case I have something like this:

<div class="errorBox nameBox" style="position: absolute; top: 352px; left: 948.5px; display: block; width: 100%">
   <div class="errorArrow"></div>
   <div class="errorDescription">Type your name</div>
</div>

Regards.!!