Question

我正试图让这个灯箱淡入淡出，如果可能的话，最好是用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();
});

Answer 1

分别使用.fadeIn和.fadeOut代替.show和.hide。

Answer 2

根据您的要求，我建议使用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 });
    });
});

使用css过渡淡入灯箱

2 个答案:

JS Fiddle Demo