Question

how to let element take up space when hidden, before using jquery mouseover to make it appear.

here is an example.

http://jsfiddle.net/Nj97k/

when i do visiliblity hidden, the icon no longer fades in on mouseover.

Answer 1

Initially make opacity 0

<a id='posttext'class='flagpost' style='color:grey;' href='javascript:void(0)'>
    <i style="opacity: 0 " class='icon-flag'>This is an icon</i>Flag
</a>​

then do fades normally:

$('.flagpost').mouseover(function() {
    $('.icon-flag').fadeTo(500, 1);

});
$('.flagpost').mouseleave(function() {
    $('.icon-flag').fadeTo(300, 0);
});​

Demo here