Home  >  Article  >  Web Front-end  >  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中世界最好的语言
php中世界最好的语言Original
2018-06-07 14:13:042735browse

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!

Recommended reading:

Summary of how to use the state object of vuex

vuex state mapState actual project analysis

The above is the detailed content of How to make fade-in and fade-out and slide-in and slide-out animation cases. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn