アニメーションの違いは、jQueryを使って隠し1.6.3

Question

私はこのようなリンクを持つ複数のコンテナを、持っている：

<div class="items" id="first"><a href="item1">item 1</a></div> 

コンテナは、背景画像を持っており、リンクがで隠されています：display: none;

$(".items").mouseover(function() { 
    $("a", this).show(1500); 
}).mouseout(function() { 
    $("a", this).hide(1500); 
}); 

Live example

ここで問題は、テキストがゆっくりと表示されていることですが、占有する場所が瞬時にとられることです。どのようにopositeを達成する - テキストがすぐに表示され、それが占める場所がゆっくりと表示されるのですか？

Answer 1

http://jsfiddle.net/wtZPQ/2/

あなたも表示したい場合があります。ブロックをテキストdoesntのラップをmakesureします。

Answer 2

<a>が非表示になっていると、画面上にスペースが表示されません。彼らが隠されなくなるとすぐに、彼らは突然スペースを取る。そのため、あなたのライブの例では、ホバリングしてすぐにそのスペースが開いているのが見えます。

テキストのスペースがゼロになってからフルスペースを占めるまでになっています。不透明度はゼロから始まり、1500ミリ秒後には完全な不透明度に達するため、すぐには表示されません。しかし、不透明度ゼロであっても、まだ存在し、スペースを占めています。

だから、あなたが求めていることは本当に可能ではありません。あなたは<a>を絶対的な位置に置くことができるので、スペースを取らずに完全に消えた後にグラフィックの間のスペースを広げることができますが、私はそれがあなたのために何をしようとしているのか分かりません....

Answer 3

ああ、私はJQuery 1.4.4で試してみましたが正しく動作しますが、あなたのjsfiddleに表示されているように、1.6.3で破損します。

とにかく、aのタグのデフォルト値がdisplayのinlineという幅を割り当てられていないためでした。

あなたは.items a { display:inline-block; }なり、その後はJQueryを使用してそれらを隠すためにそれを強制することができます：彼らの両方がゆっくりと起こっているよう

$(".items a").hide(); 

http://jsfiddle.net/wtZPQ/3/