jquery - 摆脱淡入淡出的延迟

Question

如果您在这里看到这个 JSFiddle，我只是想在按钮/链接中设置动画，尽管是以某种方式。我希望链接仍然适用于布局，以便布局根本不会改变。

我的 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

我必须按照此处visibility:visible所述进行 then hide()hack 。奇怪的是，如果我完全禁用我的 JavaScript，链接通常会占用空间。如果我启用 JavaScript，那么布局就会变得一团糟。似乎由于某种原因，它在延迟结束之前执行and the ！我究竟做错了什么？css()hide()

Answer 1

您的代码不起作用的原因是 .delay() 与 javascript 的 setTimeout 不同。查看http://api.jquery.com/delay/了解更多相关文档。

试试这个修复：

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

这是jsfiddle：http: //jsfiddle.net/7LGrS/2/

Answer 2

<a style='display:none; ' id="helloWorld" href="#" class="btn primary large">
 Hello, World! &raquo;
</a>

just add the style to the anchor