javascript - jqueryを使用してmouseoverにフェードインする前に、非表示の要素にスペースを占有させる方法は？

Question

jqueryマウスオーバーを使用して要素を表示する前に、要素を非表示にしたときにスペースを占有させる方法。

ここに例があります。

http://jsfiddle.net/Nj97k/

可視性を非表示にすると、マウスオーバー時にアイコンがフェードインしなくなります。

Answer 1

最初に不透明度を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>​

その後、通常どおりフェードします。

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

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

こちらのデモ

Answer 2

display:none要素をに置き換えるか、jQuery のイベントをすぐにopacity:0トリガーしてこれを行うことができます。mouseleave

.icon-flag {
    opacity: 0;
}

または

$('.flagpost')
    .mouseover(function(){
        $('.icon-flag').fadeTo(500,1);
    }).mouseleave(function(){
        $('.icon-flag').fadeTo(300,0);
    }).trigger("mouseleave");​​​​​