如何淡出叠加 div 以增加单击后面另一个 div 的不透明度

Question

所以我想做的是在点击时淡出一个覆盖的'介绍'div，以便这个人可以访问下面的div。我根本不是jQuery的大师，所以我真的需要这方面的帮助。我的代码是：

 <!-- OVERLAY  INTRO  -->
<div class="button animated slideInLeft"  id="introbox"  style="width:1000px;"  align="center">
    <h1>Welcome</h1>
    <p class="secondaryheadertext">Blah blah blah</p>
    <div align="center">
        <img title="Cofffee Bean" src="images/cfblogo1.png" id="cfblogo1">
    </div>
    <!-- UNDERLAYING MAIN BIT  -->
    <div id="main">
        [WHATEVER IS BEHIND GOES IN HERE]
    </div>

Answer 1

您可以在页面中添加对jquery的引用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

然后在脚本块中添加以下代码。 这是假设您要单击介绍框以淡入淡出。

$(document).ready(function(){
   $('#introbox').on('click', function(){
       $(this).fadeOut('slow');
   });
});

Answer 2

这能解决问题吗？

$(function(){
    var $intro = $("#introbox");
    $(document).bind('click', function(){
        $intro.fadeOut('fast');
    });
});

这是小提琴

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('#introbox').click(function(){
       $(this).fadeOut('slow');
   });
});
</script>