Detailed explanation of jQuery animation and special effects
In
jquery, besides asynchronous, what we need to use most is animation and special effects. If we want to give users a better experience, jquery is the best choice, let us Let’s take a look at the detailed explanation of jquery’s animation and special effects!
1. Show and hide hide() and show()
For animation, showing and hiding are the most basic One of the effects, this section briefly introduces the display and hiding of jQuery.
<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(); //隐藏
});
$("input:last").click(function() {
$("p").show(); //显示
});
});
</script>
<input type="button" value="Hide">
<input type="button" value="Show">
<p>点击按钮，看看效果</p>
<div><em>本节主要降级和学习jQuery的自动显隐，渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说，显示和隐藏是最基本的效果之一，本节简单介绍jQuery的显示和隐藏。</em>
</div>The above is a test of the hide() and show() functions.
2. Use the show(), hide() and toggle() methods
The previous example uses show() and toggle() The hide() method has been briefly introduced. In fact, these two methods can accept parameters to control the display and hide process.
The syntax is as follows
show(duration,[callback]); hide(duration,[callback]);
Among them, duration represents the length of animation execution time, which can be a string representing speed, including slow, normal, fast. It can also be an integer representing time (milliseconds). callback is an optional callback function. Executed after the animation completes.
<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(300); //隐藏
});
$("input:last").click(function() {
$("p").show(500); //显示
});
});
</script>The example is the same as the first example, except that time parameters are added to hide() and show(). In fact, toogle() can also add event parameters.
3. Use fadeIn() and fadeOut() methods
For animation effects to show and disappear, jQuery also provides fadeIn( ) fadeOut are two practical methods. Their animation effects are similar to fading, and their syntax is exactly the same as slow() and hide().
fadeIn(duration, [callback]); fadeOut(duration, [callback]);
Example
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(3000); //逐渐fadeOut
});
$("input:eq(1)").click(function() {
$("img").fadeIn(1000); //逐渐fadeIn
});
});
</script>
<img src="/uploads/allimg/150204/225Q14038-0.jpg">
<input type="button" value="Hide">
<input type="button" value="Show">Usage of fadeTo() method.
fadeTo() method gradually changes the opacity of the selected elements to the specified value.
Example:
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(1000);
});
$("input:eq(1)").click(function() {
$("img").fadeIn(1000);
});
$("input:eq(2)").click(function() {
$("img").fadeTo(1000, 0.5);
});
$("input:eq(3)").click(function() {
$("img").fadeTo(1000, 0);
});
});
</script>
<p><img src="03.jpg"></p>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">fadeOut related parameters
speed
Optional. Specifies the speed at which an element changes from the current transparency to the specified transparency.
Possible values:
Milliseconds (e.g. 1500)
"slow"
"normal"
"fast"
opacity Required. Specifies the transparency to fade in or out. Must be a number between 0.00 and 1.00.
callback
Optional. The function to be executed after the fadeTo function is executed.
To learn more about callbacks, visit our jQuery Callback chapter.
This parameter cannot be set unless the speed parameter is set.
4. Slide slideUp and slideDown effects
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("div").add("img").slideUp(1000);
});
$("input:eq(1)").click(function() {
$("div").add("img").slideDown(1000);
});
$("input:eq(2)").click(function() {
$("div").add("img").hide(1000);
});
$("input:eq(3)").click(function() {
$("div").add("img").show(1000);
});
});
</script>
<input type="button" value="SlideUp">
<input type="button" value="SlideDown">
<input type="button" value="Hide">
<input type="button" value="Show"><br>
<div></div><img src="04.jpg">Several mentioned above For animation effects, jQuery also provides slideUp() and slideDown() to simulate a slide-like curtain effect in PPT, which is exactly the same as slow() and hide().
The above code defines a div and an img, which are combined together using the add method.
5. Custom animation
Considering the versatility of the framework and the size of the code file, jQuery cannot cover all animation effects, but It provides the animate() method, which enables developers to customize animations. This section mainly introduces the two forms and applications of the animate() method.
The animate() method gives developers a lot of space. It comes in two forms. The first form is more commonly used. The usage is as follows
animate(params,[duration],[easing],[callback])
where params is the list of css properties that you want to change, and the final value you want to change to, and duration is optional , which has exactly the same meaning as the parameters of show()/hide(). Easing is an optional parameter, usually used by animation plug-ins. Used to control the rhythm change process. jQuery only provides two values: linear and swing. callback is an optional callback function. Fires after the animation completes.
requires attention. Variables in params follow the camel naming method. For example, paddingLeft cannot be written as padding-left. In addition, params can only be attributes represented by numerical values in CSS. For example, properties such as width.top.opacity and
like backgroundColor are not supported by animate.
<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
}
</style>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("#block").animate({
opacity: "0.5",
width: "80%",
height: "100px",
borderWidth: "5px",
fontSize: "30px",
marginTop: "40px",
marginLeft: "20px"
}, 2000);
});
});
</script>
<button id="go">Go>></button>
<div id="block">动画！</div>In params, jQuery can also use "+=" or "-=" to indicate relative changes. For example,
<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
position: absolute;
}
</style>
<script type="text/javascript">
$(function() {
$("button:first").click(function() {
$("#block").animate({
left: "-=80px" //相对左移
}, 300);
});
$("button:last").click(function() {
$("#block").animate({
left: "+=80px" //相对右移
}, 300);
});
});
</script>
<button >Go>></button>
<button >Go>></button>
<div id="block">动画！</div>first perform absolute positioning of the div, and then use -= and += in animate() to achieve relative left movement and relative right movement respectively.
The animate() method has another form, as shown below:
animate(params,options)
Among them, params is exactly the same as the first form, and options is animation. Optional parameter list, mainly including duration, esaing, callback, queue, etc., among which duration.easing.callback is exactly the same as the first form, queue is a Boolean value, indicating that when there are multiple animate() forming jQuery, the current animate( ) Immediately following the next animate(), should it be executed in sequence (true) or false at the same time?
The following example shows the second usage of animate().
<style>
div {
background-color: #FFFF22;
width: 100px;
text-align: center;
border: 2px solid #000000;
margin: 3px;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
input {
border: 1px solid #000033;
}
</style>
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
//第一个animate与第二个animate同时执行，然后再执行第三个
$("#block1").animate({
width: "90%"
}, {
queue: false,
duration: 1500
})
.animate({
fontSize: "24px"
}, 1000)
.animate({
borderRightWidth: "20px"
}, 1000);
});
$("input:eq(1)").click(function() {
//依次执行三个animate
$("#block2").animate({
width: "90%"
}, 1500)
.animate({
fontSize: "24px"
}, 1000)
.animate({
borderRightWidth: "20px"
}, 1000);
});
$("input:eq(2)").click(function() {
$("input:eq(0)").click();
$("input:eq(1)").click();
});
$("input:eq(3)").click(function() {
//恢复默认设置
$("div").css({
width: "",
fontSize: "",
borderWidth: ""
});
});
});
</script>
<input type="button" id="go1" value="Block1动画">
<input type="button" id="go2" value="Block2动画">
<input type="button" id="go3" value="同时动画">
<input type="button" id="go4" value="重置">
<div id="block1">Block1</div>
<div id="block2">Block2</div>以上两个div块同时运用了三个动画效果，其中第一个div快的第一个动画添加了queue:false参数，使得前两项两个动画同时执行。可以通过重置反复测试，熟悉animate()第二种形式。
以上就是本文的全部内容了，希望大家能够喜欢。
相关推荐：
The above is the detailed content of Detailed explanation of jQuery animation and special effects. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Detailed explanation of obtaining administrator rights in Win11
Mar 08, 2024 pm 03:06 PM
Windows operating system is one of the most popular operating systems in the world, and its new version Win11 has attracted much attention. In the Win11 system, obtaining administrator rights is an important operation. Administrator rights allow users to perform more operations and settings on the system. This article will introduce in detail how to obtain administrator permissions in Win11 system and how to effectively manage permissions. In the Win11 system, administrator rights are divided into two types: local administrator and domain administrator. A local administrator has full administrative rights to the local computer
Detailed explanation of division operation in Oracle SQL
Mar 10, 2024 am 09:51 AM
Detailed explanation of division operation in OracleSQL In OracleSQL, division operation is a common and important mathematical operation, used to calculate the result of dividing two numbers. Division is often used in database queries, so understanding the division operation and its usage in OracleSQL is one of the essential skills for database developers. This article will discuss the relevant knowledge of division operations in OracleSQL in detail and provide specific code examples for readers' reference. 1. Division operation in OracleSQL
How to set up ppt animation to enter first and then exit
Mar 20, 2024 am 09:30 AM
We often use ppt in our daily work, so are you familiar with every operating function in ppt? For example: How to set animation effects in ppt, how to set switching effects, and what is the effect duration of each animation? Can each slide play automatically, enter and then exit the ppt animation, etc. In this issue, I will first share with you the specific steps of entering and then exiting the ppt animation. It is below. Friends, come and take a look. Look! 1. First, we open ppt on the computer, click outside the text box to select the text box (as shown in the red circle in the figure below). 2. Then, click [Animation] in the menu bar and select the [Erase] effect (as shown in the red circle in the figure). 3. Next, click [
How to use PUT request method in jQuery?
Feb 28, 2024 pm 03:12 PM
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
Detailed explanation of the role and usage of PHP modulo operator
Mar 19, 2024 pm 04:33 PM
The modulo operator (%) in PHP is used to obtain the remainder of the division of two numbers. In this article, we will discuss the role and usage of the modulo operator in detail, and provide specific code examples to help readers better understand. 1. The role of the modulo operator In mathematics, when we divide an integer by another integer, we get a quotient and a remainder. For example, when we divide 10 by 3, the quotient is 3 and the remainder is 1. The modulo operator is used to obtain this remainder. 2. Usage of the modulo operator In PHP, use the % symbol to represent the modulus
jQuery Tips: Quickly modify the text of all a tags on the page
Feb 28, 2024 pm 09:06 PM
Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <
Use jQuery to modify the text content of all a tags
Feb 28, 2024 pm 05:42 PM
Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:
How to make animated thunderstorm in thunderstorm ppt
Mar 20, 2024 pm 02:41 PM
Sometimes we encounter the need to add animation to a ppt. For example, if we want to make a thunderstorm ppt and add some animated thunderstorm effects to it, what should we do? Today, the editor will introduce to you how to make an animated thunderstorm in thunderstorm ppt. It is actually very simple, come and learn it! 1. First we open a PPT page, "Insert" - "Shape" - "Basic Shape" - "Lightning Shape", as shown in the picture. 2. In the "Fill and Line" tab on the right, select "Fill": white; "Select" "Line": black, as shown in the figure. 3. Click "Animation" - "Custom Animation" - "Add Effects" - "Emphasis" - "Subtle" - "Flickering",
