我如何淡出一个覆盖层 div 然后增加另一个 div 在点击后的不透明度

Question

所以我想做的是在单击时淡化覆盖层 'intro' 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

这样做有用吗？

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

这里是fiddle

Answer 2

您可以在您的页面中添加对 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 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>

我如何淡出一个覆盖层 div 然后增加另一个 div 在点击后的不透明度

How do I fade an overlaying div out to then increase the opacity of another div behind on-click

html

javascript

css

jquery

fadeout