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
Complete steps for using Nginx+Tomcat for load balancing under Windows
Preface Today, Prince will talk to you about the ...
Google Translate Tool: Quickly implement multilingual websites
Google China has released a translation tool that ...
Detailed example of inserting custom HTML records in Quill editor
It is already 2020. Hungry humans are no longer s...
Why MySQL does not recommend deleting data
Table of contents Preface InnoDB storage architec...
JavaScript function call, apply and bind method case study
Summarize 1. Similarities Both can change the int...
How to install openssh from source code in centos 7
Environment: CentOS 7.1.1503 Minimum Installation...
Solution to multiple 302 responses in nginx proxy (nginx Follow 302)
Proxying multiple 302s with proxy_intercept_error...
MySQL enables slow query (introduction to using EXPLAIN SQL statement)
Today, database operations are increasingly becom...
36 principles of MySQL database development (summary)
Preface These principles are summarized from actu...
Solution to slow response of Tomcat server
1. Analytical thinking 1. Eliminate the machine&#...
Mysql delete duplicate data to keep the smallest id solution
Search online to delete duplicate data and keep t...
Use native js to simulate the scrolling effect of live bullet screen
Table of contents 1. Basic principles 2. Specific...
Detailed explanation of the relationship between Linux and GNU systems
Table of contents What is the Linux system that w...
Use of MySQL official export tool mysqlpump
Table of contents Introduction Instructions Actua...
Analysis and solution of the reasons for left and right jumps when loading web pages
I have been having this problem recently when desi...