JQuery implements hiding and displaying animation effects
|
This article shares the specific code of JQuery to achieve hiding and displaying animation effects for your reference. The specific content is as follows Hide and Showgrammar
Parameter Description: The optional speed parameter specifies the speed of hiding/showing and can take the following values: "slow", "fast" or milliseconds. Implementation Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document Processing</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<style>
div {
background: lightblue;
padding: 20px;
}
p {
background: lavenderblush;
padding: 20px;
}
</style>
<script>
$(function() {
$("#btnHide").click(function() {
//$("div").hide();
//$("div").hide(2000);
$("div").hide(2000, function() {
alert("Hiding completed!");
});
});
$("#btnShow").click(function() {
//$("div").show();
//$("div").show(2000);
$("div").show(2000, function() {
alert("Display completed!");
});
});
$("#btnToggle").click(function() {
//$("p").toggle();
//$("p").toggle(2000);
$("p").toggle(2000, function() {
alert("Switch completed!");
});
});
});
</script>
</head>
<body>
<button id="btnHide">Hide-div</button>
<button id="btnShow">Show-div</button>
<button id="btnToggle">Switch show and hide -p</button>
<div>div1</div>
<br/>
<div>div2</div>
<p style="display: none;">p1</p>
<p>p2</p>
</body>
</html>Effect display Hide effect display
Display effect display
Toggle show and hide Switched from P1 to P2
Fade in and fade outgrammar
Parameter Description: The optional speed parameter specifies the speed of hiding/showing and can take the following values: "slow", "fast" or milliseconds. Implementation Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Effect</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<style>
div {
background: lightblue;
padding: 20px;
}
p {
background: lavenderblush;
padding: 20px;
}
</style>
<script>
$(function() {
$("#btnIn").click(function() {
//$("div").fadeIn();
//$("div").fadeIn(2000);
$("div").fadeIn(2000, function() {
alert("Fade in completed!");
});
});
$("#btnOut").click(function() {
//$("div").fadeOut();
//$("div").fadeOut(2000);
$("div").fadeOut(2000, function() {
alert("Fade out completed!");
});
});
$("#btnToggle").click(function() {
//$("p").fadeToggle();
//$("p").fadeToggle(2000);
$("p").fadeToggle(2000, function() {
alert("Switch completed!");
});
});
});
</script>
</head>
<body>
<button id="btnIn">Fade-in-div</button>
<button id="btnOut">Fade-out-div</button>
<button id="btnToggle">Toggle fade in and out - P</button>
<div>div1</div>
<br/>
<div>div2</div>
<p style="display: none;">p1</p>
<p>p2</p>
</body>
</html>The effect is not much different from hiding and showing The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Briefly describe mysql monitoring group replication
>>: Docker solves the problem that the terminal cannot input Chinese
Recommend
WeChat Mini Program Basic Tutorial: Use of Echart
Preface Let’s take a look at the final effect fir...
MySQL 5.7.25 compressed version installation and configuration method graphic tutorial
This article shares the installation and configur...
Use IISMonitor to monitor web pages and automatically restart IIS
Table of contents 1. Tool Introduction 2. Workflo...
Bootstrap+Jquery to achieve calendar effect
This article shares the specific code of Bootstra...
Detailed explanation of the use cases of Vue listeners
The first one is to use jQuery's ajax to send...
js implementation of verification code case
This article example shares the specific code of ...
Website background music implementation method
For individual webmasters, how to make their websi...
Several ways of running in the background of Linux (summary)
1. nohup Run the program in a way that ignores th...
HTML implements the function of detecting input completion
Use "onInput(event)" to detect whether ...
Detailed explanation of Vue3 encapsulation Message message prompt instance function
Table of contents Vue3 encapsulation message prom...
Mysql8.0 uses window functions to solve sorting problems
Introduction to MySQL Window Functions MySQL has ...
Detailed explanation of the use of grid properties in CSS
Grid layout Attributes added to the parent elemen...
Practical method of deleting associated tables in MySQL
In the MySQL database, after tables are associate...
ul list tag design web page multi-column layout
I suddenly thought of this method when I was writi...
Docker View JVM Memory Usage
1. Enter the host machine of the docker container...