Jquery 带有css过渡的淡入灯箱

我正在尝试使这个灯箱淡入淡出，如果可能的话，我希望能用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>

---

分别使用

.fadeIn

和

.fadeOut

而不是

.show

和

.hide

。

根据您的要求，我建议使用CSS3转换而不是jQuery的和函数，因为它们在大多数移动设备上的性能都很差。我建议使用一个插件，例如，它可以与jQuery一起工作，允许平滑的动画：

$(document).ready(function () {
    $("#hide").click(function () {
        $("#about").transition({opacity: 0 }, function () { $(this).hide(); });
    });
    $("#show").click(function () {
        $("#about").show().transition({opacity: 1 });
    });
});

---

使用transition:opacity属性在不使用jquery的情况下设置动画

$(document).ready(function () {
    $("#hide").click(function () {
        $("#about").transition({opacity: 0 }, function () { $(this).hide(); });
    });
    $("#show").click(function () {
        $("#about").show().transition({opacity: 1 });
    });
});