jQuery 有一些非常简单的内置功能，用于对不同的页面元素进行“淡入”和“淡出”。 我想我们可以利用其中一些函数来创建一个非常简单的 **剧透揭示器**。
通过一些智能的 CSS 和 jQuery，我们可以保持我们的标记 **非常干净**。 请查看此处的用法
<p>In the movie Citizen Kane, Charles Foster Kane's last word "Rosebud"
turns out to <span class="spoiler">be a sled.</span></p>没错，只需要在具有“spoiler”类的 span 中使用“spoiler”。 jQuery 将找到并隐藏所有此文本，并将其替换为一个“揭示剧透”按钮。 点击该按钮后，按钮会淡出，并被 span 内部的文本替换。 查看代码
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("span.spoiler").hide();
$('<a class="reveal">Reveal Spoiler >></a> ').insertBefore('.spoiler');
$("a.reveal").click(function(){
$(this).parents("p").children("span.spoiler").fadeIn(2500);
$(this).parents("p").children("a.reveal").fadeOut(600);
});
});
</script>超级简单。 这只是一个快速的小例子，展示了 jQuery 使用起来多么简单，以及它如何补充和扩展您使用 CSS 所做的事情！
很棒的小技巧！
现在… 还要多久我们才能看到“jquery-tricks.com？” LOL！
谢谢 Chris，这正是我需要的！
好主意 Chris！ 不过，谢谢您为我剧透了《村庄》！ 实际上，我认为《村庄》还不错。
$(this).parents(“p”).children(“span.spoiler”).fadeIn(2500);
可以轻松地替换为
$(this).next().fadeIn(2500)
享受 jQuery 的乐趣
我也是这么想的 :p
谢谢
这是一个有趣的小技巧，但为了绝对避免剧透所有人，它可能应该遵循渐进增强原则
为了避免在没有 JavaScript 支持的情况下剧透人们，包括在 feed 阅读器或移动设备上阅读内容的人，您应该在剧透之前添加许多、许多 br 标签，以及一条消息，说明滚动到下方阅读剧透。 然后，您可以使用 jQuery 代码将 br 标签和“滚动以阅读”消息设为不可见。 您使剧透本身可见的函数将保持 br 标签和消息不可见。 结果将是一个对所有人都有效的剧透警报，无论其用户代理功能如何。
我决定模拟并博客化我在评论 7 中建议的增强功能。 以下是链接
http://blogs.pathf.com/agileajax/2008/04/jquery-fade-in.html
我尝试了…
但我做不到！
我使用了
script type=”text/javascript” src=”我上传的 .JS 的自有 URL”> /script>
$(document).ready(function() {
$(“span.spoiler”).hide();
$(‘揭示剧透 >> ‘).insertBefore(‘.spoiler’);
$(“a.reveal”).click(function(){
$(this).parents(“p”).children(“span.spoiler”).fadeIn(2500);
$(this).parents(“p”).children(“a.reveal”).fadeOut(600);
});
});
/script>
在文本中…
p>在电影《公民凯恩》中，查尔斯·福斯特·凯恩的最后一句话“玫瑰花蕾”
原来 span class=”spoiler”>是一架雪橇。 /span> /p>
它没有使剧透… 不知道为什么… :S
我不得不删除其他 >，因为它会删除那部分…
有什么帮助吗？ 使用 blogger… :S
您能否提供一个您遇到问题的示例页面，以便我们查看一下？ 看起来您操作正确…
嘿，很棒的小技巧，它让我很想在我的网站上实现它。
Skillsheaven
谢谢。
您知道如何使揭示的文本成为链接吗？
换句话说，在您上面的示例中，如果您想将揭示的答案链接到 imdb.com 页面，您如何在不将“揭示”文本设为链接的情况下做到这一点？
Chris，我认为要验证您需要转义关闭标签。
Reveal Spoiler >></a>
应该为
Reveal Spoiler >><\/a>
这可以验证，并且似乎在没有问题的情况下工作。