我试图让这个灯箱淡入淡出，如果可能的话，最好用 CSS 来做。有什么建议么？
HTML
<section id="about">
<div class="wrapper">
<button id="hide" class="close">close</button>
<h1>About</h1>
</div>
</section>
<a id="show" href="#about" class="scroll">About</a>
JS
// Simple show and hide button
$("#hide").click(function(){
$("#about").hide();
});
$("#show").click(function(){
$("#about").show();
});
分别使用.fadeInand.fadeOut代替.showand .hide。
根据您的要求，我建议使用 CSS3 过渡而不是 jQuery 的fadeIn和fadeOut函数，因为它们在大多数移动设备上表现不佳。我建议使用jQuery Transit之类的插件，它与 jQuery 一起工作，可以实现流畅的动画：
$(document).ready(function () {
$("#hide").click(function () {
$("#about").transition({opacity: 0 }, function () { $(this).hide(); });
});
$("#show").click(function () {
$("#about").show().transition({opacity: 1 });
});
});