摆脱淡入淡出的延迟

Posted 2023-02-21

【中文标题】摆脱淡入淡出的延迟

【英文标题】：Getting rid of a delay in fading in an item

【发布时间】：2012-01-02 17:34:22

【问题描述】：

如果您看到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() hack as noted here。奇怪的是，如果我完全禁用我的 javascript，链接通常会占用空间。如果我启用 JavaScript，那么布局就会变得一团糟。似乎由于某种原因，它正在执行css() 和hide() 之前延迟结束！我究竟做错了什么？

【参考方案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/

【讨论】：

那么说delay() 只适用于其他动画，而不适用于其他 jQuery 操作是否很安全？这就是我的代码不起作用的原因吗？

是的，.delay() 适用于 jQuery 的 fx 队列。其他 jQuery 操作不使用 fx 队列，所以 delay() 在那里有点用处。

【参考方案2】：

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

just add the style to the anchor

【讨论】：

但是在布局中不占空间？

创建一个具有明确宽度和高度的相同大小的 div。然后，在其中放下锚。

TK Kocheran，您希望按钮在 1 秒后才出现，淡入，对吗？如果是这样，您的代码是正确的，因为延迟确实超时。一秒（1000 毫秒）是 DELAY 或 SETTIMEOUT 中的一秒。 css("visibility","visible") 和 hide() 是不必要的。如果您只是为按钮创建一个存放位置，它将起作用。我改变了你的小提琴并在回答之前对其进行了测试。但我在那里没有帐户或想创建一个。我使用自己的域作为示例 (zequinha-bsb.int-domains.com)。

我假设您的脚本正在从准备好的文档中运行。这种计数器只有在文档加载后才会启动，如果放在那里的话。

对不起，如果我不能帮忙。我的意图是最好的。