Home > Developer > Web Develop
1. Simplest Animation: explicit and hidden effects
CSS supports two methods to display and hide elements, namely, using the visibility or display style. They control the same effect when the elements are displayed and hidden, but the results are different.
The details are as follows:
When hiding an element, the visibility attribute also saves the influence of the element in the Document Stream. After hiding the element, the unknown element remains unchanged. This attribute includes the visible (default) and hidden values.
After the display is hidden, hidden elements no longer occupy the location of the document.
Note: This is a coincidence. This style attribute just helps me with the following:
This page contains a list box of device types and a box of multiple packet capture ports. You must select a gigabit device type to display four packet capture ports, select 10g to hide the eth3 and eth4 Network Ports.
At that time, I first wrapped eth3 and eth4 with the span element, and then triggered the event to let span execute the hide () method when selecting 10 MB. In this way, the last two network ports are hidden, but there is a problem. After hide (), the page is closed
The test department said that disabled = "disabled" should not be replaced by the read-only attribute. The test department is trying to find a time for the artist to call it. At night, I saw the visibility style attribute in the book, and I used it.
The show () and hide () methods are defined in jQuery to index elements. In fact, these two methods are internally used to operate the display style of the element.
You can also set parameters for the show () and hide () methods. The first parameter represents the (hidden) speed. The smaller the parameter value, the faster the parameter value (which can be a specific value, for example, 1000 represents 1000 ms, or it can be a predefined string: slow, normal, st, and minute
The second parameter is also an optional parameter, indicating the callback function to be called after the animation demonstration.
Example:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> Let's look at another function without callback:<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. fade in and outThe fadeIn () and fadeOut () Methods change the opacity of the elements within a certain period of time until the elements completely disappear (or appear), syntax and show () and hide () same.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3. ScalingThe usage of the slideUp () and slideDown () methods is the same as that of the previous two functions.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4. Custom Animation MethodsAnimate (params, speed, callback)
Parameter description:
Params: A ing containing style attributes and values
Sleep: The speed parameter. Optional.
Callback: The function executed when the animation is completed.
(1) A simple Custom Animation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Note: To make the element dynamic, you need to change the left attribute of the element. Before using the animate () method, you must first set the positionSet the property to 'relative 'or 'sbsolude '.
(2) Accumulative and progressive Animation
In the previous example, When you click div for the first time, 500 pixels will be moved to the left, and the second click will not be moved. Accumulative and progressive Subtraction is continuous. You only need to change left: "500px" to left: "+ = 500px" or left: "-= 500px.
$(function(){ $("#panel").click(function(){ $(this).animate({left: "+=500px"}, 3000);})})(3) Multiple animationsA. Execute multiple animations at the same time
The above example only controls the change of the left attribute. This time, when we control the left attribute, the element height is changed to 200px.
$(function(){ $("#panel").click(function(){ $(this).animate({left: "500px",height:"200px"}, 3000);})})B. Sequential animation executionIn the preceding example, the Right-shift and zoom-in height of an element are both animated. Now we need to first shift right and then enlarge the height. It's very easy to do. Just split the above animate () method into two.
$(function(){ $("#panel").click(function(){ $(this).animate({left: "500px"},3000) .animate({height:"200px"},1000);})})(4) Integrated AnimationNext we will complete more complex animations. Click the div element, move it to the right, increase its height, and change its opacity from 50% to 100%. Then let it move from top to bottom, and its width increases.
And hide it in fade-out mode.
$ (Function () {$ ("# panel" ).css ("opacity", 0.5); // Set opacity $ ("# panel "). click (function () {$ (this ). animate ({left: "400px", height: "200px", opacity: "1"}, 3000 ). animate ({top: "200px", width: "200px"}, 3000 ). fadeOut (1000 );})})(5) animation callback functionIn the above example, if you want to switch the css style in the last step instead of hiding the element. In this case, we can use the third parameter callback function of animate.
$ (Function () {$ ("# panel" ).css ("opacity", 0.5); // Set opacity $ ("# panel "). click (function () {$ (this ). animate ({left: "400px", height: "200px", opacity: "1"}, 3000 ). animate ({top: "200px", width: "200px", function({{}(this}.css ("border", "5px solid blue ")});})})In this way, the css method is added to the animation queue.5. Stop the animation and determine whether the animation is in the animation state.
(1) Stop the animation of Elements
Stop ([clearQueue] [, gotoEnd]) both are optional parameters and are boolean
Parameter description:
ClearQueue: Indicates whether to clear the animation queue that has not been completed
GotoEnd: Indicates whether an animation is being executed to the final state.
A comprehensive example shows the two parameters of the stop () method:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (2) determine whether an element is animated.When using the animate () method, avoid the inconsistency between animations and users' Behaviors Caused by animation accumulation. An animation accumulation occurs when you quickly execute an animation () on an element.
The solution is to determine whether the element is in the animation state. When the element is not in the animation state, a new animation is added to the element.
Usage:
If (! $ (Element). is (": animated") {// Add a new animation}6. Other animation MethodsIn addition to the animation method mentioned above, jquery also has three animation methods specifically used for interaction.
Toggle (speed [, callback]) switches the visible state of the element to replace hide () and show.
SlideToggle (speed [, callback]) switches the visible state by adjusting the element height, replacing slideUp and slideDown.
FadeTo (speed, opacity [, callback]) adjusts the opacity gradient of an element to a certain value.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
