Home > Article > Web Front-end > How to make fade-in and fade-out and slide-in and slide-out animation cases
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!