0

この JSFiddle hereが表示されている場合は、特定の方法ではありますが、単にボタン/リンクでアニメーション化しようとしています。レイアウトがまったく変わらないように、リンクを引き続きレイアウトに適用したい。

私のHTML：

<p>
    <a id="helloWorld" href="#" class="btn primary large">Hello, World! &raquo;</a>
    Fork this to get hacking on <span class="label stark">Bootstrap</span> and <span class="label stark">jQuery</span>.
</p>

私のCSS：

#helloWorld { 
     visibility: hidden;
}

私のjQuery：

$("#helloWorld")
    .delay(1000) // after a second
    .css("visibility", "visible") // make it 'visible
    .hide() // but hide it 
    .fadeIn(500); // then fade it in

here に記載されているvisibility:visibleように、その後hide()ハックを行う必要があります。奇妙なことに、JavaScript を完全に無効にすると、リンクが通常どおりスペースを占有します。JavaScript を有効にすると、レイアウトがめちゃくちゃになります。なんらかの理由で、遅延が終わる前にと を実行しているようです! 私は何を間違っていますか？css()hide()

4

2 に答える 2

2

コードが機能しない理由は、.delay() が JavaScript の setTimeout と同じように機能しないためです。詳細については、 http://api.jquery.com/delay/を参照してください。

この修正を試してください：

setTimeout(function() {
  $("#helloWorld").css("visibility", "visible").hide().fadeIn(500);
}, 1000);

これがjsfiddleです：http://jsfiddle.net/7LGrS/2/

于 2011-11-21T08:24:17.867 に答える
0 
<a style='display:none; ' id="helloWorld" href="#" class="btn primary large">
 Hello, World! &raquo;
</a>

just add the style to the anchor
于 2011-11-21T06:37:23.927 に答える