when mouseout the element is moving out the correct place jquery

i mede this ridiculous exp.

Demo

why when the mouseo开发者_如何学JAVAver/out event happens, the element go to a diferent place ?

in my case, i have a position: absolute; and other css attr set in the span, so, when the mouseover happens, the span have a normal fadeIn() , but, the mouseout , with fadeOut() event, made the element back to other position, like position 0 of absolute

why this happen ?

That happens because, fadeIn set the display property of span element to block when it starts animation and span is an inline element so it should actually set it to 'inline' to appear at the right location.

you can always do this (toggle opacity):

http://jsfiddle.net/AdpAb/