Home >Web Front-end >JS Tutorial >How to make fade-in and fade-out and slide-in and slide-out animation cases

How to make fade-in and fade-out and slide-in and slide-out animation cases

php中世界最好的语言Original: 2018-06-07 14:13:042765browse

This time I will bring you a case of how to make fade-in and fade-out and slide-in and slide-out animations. What are the precautions for making fade-in and fade-out and slide-in and slide-out? The following is a practical case, let’s take a look.

1. Fade in and fade out effect:

Let’s do this example:

There are two buttons, click to fade in, there is a p layer fade in, Click to fade out, and the p layer fades out:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery淡入淡出</title>
    <style>
      .p{width: 300px;height: 300px;background-color: red;display: none;}
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
      $(function(){
        $("#btn").click(function(){
          $(".p").fadeIn();
        });
        $("#btna").click(function(){
          $(".p").fadeOut();
        });
      });
    </script>
  </head>
  <body>
     <input type="button" id="btn" value="点击淡入"/>
     <input type="button" id="btna" value="点击淡出"/>
     <p class="p">
      我是一个p块哦！！！！！
     </p>
  </body>
</html>

Running effect:

## 2. Slide in and slide out effect:

Let’s do this example:

There are two buttons, click to slide in, there is a p layer to slide in, click to slide out, and the p layer slides out:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery滑入滑出</title>
    <style>
      .p{width: 300px;height: 300px;background-color: green;display: none;}
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
      $(function(){
        $("#btn").click(function(){
          $(".p").slideDown();
        });
        $("#btna").click(function(){
          $(".p").slideUp();
        });
      });
    </script>
  </head>
  <body>
     <input type="button" id="btn" value="点击滑入"/>
     <input type="button" id="btna" value="点击滑出"/>
     <p class="p">
      我是一个p块哦！！！！！
     </p>
  </body>
</html>

I believe you have read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

How to make fade-in and fade-out and slide-in and slide-out animation cases

Related articles