消除项目中淡化的延迟

如果您看到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()之前延迟结束！我究竟做错了什么？

来源

2011-11-21 Naftuli Kay

你的代码不工作的原因是因为.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-21 08:24:17

因此，说'delay（）'只适用于其他动画，但不适用于其他jQuery操作？这就是为什么我的代码不工作？ –

是的，'.delay（）'适用于jQuery的'fx'队列。其他的jQuery操作不使用'fx'队列，所以'delay（）'在那里是没用的。 –

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

just add the style to the anchor

来源

2011-11-21 06:37:23

但后来它不占据任何布局空间？ –

用明确的宽度和高度创建一个大小相同的div。然后，放下锚点。 –

这并不能解释为什么我的脚本无法正常工作。 –

消除项目中淡化的延迟

回答

相关问题