html jQuery动画叠加开始

Posted 2021-05-11

   * {
     margin: 0;
     padding: 0;
   }
   
   body {
     font-family: Verdana;
     background-color: #1c5284;
   }
   
   a {
     font-size: 72px;
     color: #0e7bae;
     text-decoration: none;
   }
   
   a:hover {
     color: white;
   }
   
   ul {
     width: 8in;
     margin: 0px auto;
     text-align: center;
     margin-top: 72px;
   }
   
   li {
     display: inline-block;
   }
   
   li:hover {
     color: white;
   }
   
   section#overlay {
     position: absolute;
     top: 0px;
     left: 0px;
     font-size: 40px;
     color: white;
     /* update width to 0% */
     width: 0%;
     height: 100%;
     background-color: rgba(50, 50, 50, .8);
     /*visibility: hidden;*/

   }
   
   section#overlay p {
     text-align: center;
     position: relative;
     top: 200px;
     visibility:hidden;
   }
   
   section#overlay nav#close {
     position: absolute;
     right: 50px;
     top: 50px;
     width: 50px;
     height: 55px;
     border: 1px white solid;
     text-align: center;
   }
   
   section#overlay nav#close:hover {
     background-color: orange;
   }

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

$(function() {
  console.log('ready');

  //hide all tool tips
  $('.tip').hide();

  //tooltip for eat (hover takes two functions)
  $('#eat').hover(function() { // first function

    //change background
    $('body').css('background-image', "url('http://www.redrocketmedia.com/des157/images/bg_or.gif')");

  }, function() { // second function
    //change background
    $('body').css('background-image', 'none');

  });

  //tooltip for sleep (hover takes two functions)
  $('#sleep').hover(function() { // first function

    //change background
    $('body').css('background-color', 'black');

  }, function() { // second function

    //change background
    $('body').css('background-color', '#1c5284');

  });

  //tooltip for design (hover takes two functions)
  $('#design').hover(function() { // first function

    //change background
    $('body').css('background-image', "url('http://www.redrocketmedia.com/des157/images/check.gif')");

  }, function() { // second function

    //change background
    $('body').css('background-image', 'none');

  });

  $('#design').click(function() {
    console.log('click');
    //add a variable called "center" that locates the center of the window

    //set the left property for the overlay to the center variable

    $('section#overlay').animate({
      width: '100%',
      left: '0',
    });
    $('section p').css('visibility', 'visible');
    return false;
  });

  $('nav#close').click(function() {
    console.log('click');
    $('section#overlay').css('width', '0px');
    $('section p').css('visibility', 'hidden');
    return false;
  });

});

jQuery animate overlay start
----------------------------


Forked from [glenda drew](http://codepen.io/glendadrew/)'s Pen [target practice complete](http://codepen.io/glendadrew/pen/wMPpKr/).

A [Pen](http://codepen.io/spencermathews/pen/GoXbgp) by [Spencer Mathews](http://codepen.io/spencermathews) on [CodePen](http://codepen.io/).

[License](http://codepen.io/spencermathews/pen/GoXbgp/license).

<nav>
  <ul>
    <li><a href="" class="link" id="eat">EAT.</a></li>
    <li><a href="" class="link" id="sleep">SLEEP.</a></li>
    <li><a href="" class="link" id="design">DESIGN.</a></li>
  </ul>
</nav>

<section id="overlay">
  <p>hi!</p>
  <nav id="close">x</nav>
</section>