Question

如果您看到this 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

我必须执行visibility:visible然后hide()黑客as noted here。奇怪的是，如果我完全禁用我的JavaScript，链接会正常占用空间。如果我启用了JavaScript，那么布局就会搞砸了。看来由于某种原因，它会在延迟结束之前执行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

摆脱物品褪色的延迟

2 个答案: