Home > Developer > Web Develop
jquery animation effects
1. Display and concealment of elements
Display:none; Hide
Display:block; Show
A) show () display B) Hide () hidden c) Toggle () switch,
Display is hidden, hidden then displayed
<script type= "Text/javascript" >
Function F1 () {
Hide
$ ("div"). Hide ();//display:none
document.getElementById (' id '). style.display= "None";
}
function F2 () {
Show
$ ("div"). Show ();//display:block
}
Function F3 () {
$ ("div"). Toggle ();
}
</script>
<style type= "Text/css" >
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div>duck and Dog</div>
<input type= "button" value= "Hide" onclick= "F1 ()"/>
<input type= "button" value= "Show" onclick= "F2 ()"/>
<input type= "button" value= "Switch Effect" onclick= "F3 ()"/>
</body>
CSS supports two methods of displaying and hiding elements, that is, using the visibility or display style, he
Control elements Show and hide the same effect, but the results are different.
Specify the following:
The visibility property, while hiding an element, preserves the influence of the element in the document flow,
The unknown of the element after hiding remains unchanged. This property includes visible (default) and hidden two values.
When display is hidden, hidden elements no longer occupy the location of the document.
2. Slide effect Display and hide
Slideup (Speed[,callback]) slide the element up and eventually hide
Slidedown (Speed[,callback]) slide the element down and finally display
Slidetoggle (Speed[,callback])
Speed: Set the velocity of the effect (slow () normal (200) time (ms))
Callback: callback function that is called automatically after the effect finishes executing
<script type= "Text/javascript" >
Function F1 () {
Hide
$ ("div"). Slideup (3000,function () {
Alert (' I'm gone, can you see it ');
});
}
function F2 () {
Show
$ ("div"). Slidedown (3000,function () {
Alert (' I'm back again ');
});//display:block
}
Function F3 () {
$ ("div"). Slidetoggle (1000);
}
$ (function () {
Cylinder Slide effect
SetInterval ("F3 ()", 1000);
});
</script>
<style type= "Text/css" >
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div>duck and Dog</div>
<input type= "button" value= "Hide" onclick= "F1 ()"/>
<input type= "button" value= "Show" onclick= "F2 ()"/>
<input type= "button" value= "Switch Effect" onclick= "F3 ()"/>
</body>
3. Fade in and fade out effect
Allows elements to be displayed and hidden through a certain amount of transparency
FadeIn (speed, [callback])
FadeOut (speed, [callback])
Fadetoggle (speed, [callback]) switch effect
FadeTo (speed, opacity, [callback]) set the div to a certain transparency (0-1) 0.3 is 30% transparency
<script type= "Text/javascript" >
Function F1 () {
Hide
$ ("div"). FadeOut (4000);
}
function F2 () {
Show
$ ("div"). FadeIn (4000);
$ ("#two"). FadeTo (2000,0.3);
}
Function F3 () {
$ ("div"). Fadetoggle (2000);
}
</script>
<style type= "Text/css" >
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div id = ">duck" and dog</div>
<input type= "button" value= "Hide" onclick= "F1 ()"/>
<input type= "button" value= "Show" onclick= "F2 ()"/>
<input type= "button" value= "Switch Effect" onclick= "F3 ()"/>
</body>
To set the transparency, the DIV's transparency is 30%:
4. Animation effect underlying method animate ()
Show () hide () and so on animation effect inside are the animate () method is executed
$ (). Animate (CSS effect parameters [, Time] [, callback function]);
The general jquery method, such as CSS (), returns the current jquery object when it finishes executing.
So many of the methods of jquery can be called in chains.
<script type= "Text/javascript" >
Function F1 () {
Text size, text bold, div itself width and height
Font-size Background-color Color
Console.log ($ ("div"));
The jquery object is finished calling the CSS method itself or a jquery object
Indicates that the CSS method has finished executing with the return this keyword
Console.log ($ ("div"). css (' font-weight ', ' bold '). CSS ("Background-color", ' Pink '));
var jn = {' font-size ': ' 30px ', Width: ' 400px ', Height: ' 300px '};
$ ("div"). css (' font-weight ', ' bold '). CSS ("Background-color", "Pink"). CSS ("Color", "white"). Animate (jn,2000);
$ ("div"). Animate (jn,2000);
}
</script>
<style type= "Text/css" >
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div>duck and Dog</div>
<input type= "button" value= "set" onclick= "F1 ()"/>
</body>
5. Cumulative Subtraction Animation
If the animation is set left:500 at one time, clicking the div for the first time moves the left 500 pixels, and the second click does not move.
Cumulative exhaustion is a continuous move, just want to leave: "500px" changed to left: "+=500px" or left: "-=500px" can be.
(function () {
$ ("#panel"). Click (function () {
$ (this). Animate ({left: "+=500px"}, 3000);
})
}) </span>
6. Multiple animations
1. Perform multiple animations at the same time
The above example only controls the changes to the left property, which we
Control element Height becomes 200px
$ (function () {
$ ("#panel"). Click (function () {
$ (this). Animate ({left: "500px", Height: "200px"}, 3000);
})
})
2. Sequential execution of animations
In the example above, the element right shift and magnification height are two animations at the same time. Now we are going to implement the first
Move right and zoom in, it's simple, just take the animate () method above to two
$ (function () {
$ ("#panel"). Click (function () {
$ (this). Animate ({left: "500px"},3000)
. Animate ({height: "200px"},1000);
})
})
3. Comprehensive animation
Next, complete the more complex animations. When you click the div element, let him move to the right while increasing his height.
and switch its opacity from 50% to 100%. And then let it move from top to bottom, while its width
Become larger, and when you've finished with these effects, let it fade out of the way.
$ (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);
})
})
7. Animation callback function
In the example above, if you want to toggle CSS styles in the last step instead of hiding the elements. So we can use it.
To animate's third parameter callback function.
$ (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,function ()
{$ (this). CSS ("Border", "5px Solid Blue")});
})
})
In this way, the CSS method is added to the animation queue.
8. Stop the animation and determine whether it is in an animated state
1, stop the animation of the element
Stop ([Clearqueue][,gotoend]) Two are optional parameters, all of which are of type Boolean
Parameter description:
Clearqueue: Represents whether to empty an animation queue that has not finished executing
Gotoend: Represents whether the animation being executed is jumping to the end state
The two parameters of the Stop () method can be figured out by a comprehensive example:
<style type= "Text/css" >
*{margin:0;padding:0;}
body {font-size:13px; line-height:130%; padding:60px}
#panel {width:60px; border:1px solid #0050D0; height:22px;overflow:hidden;}
. head {padding:5px; background: #96E555; cursor:pointer;width:300px;}
. content {padding:10px; text-indent:2em; border-top:1px solid #0050D0;d isplay:block; width:280px;}
</style>
<script src= ". /.. /.. /scripts/jquery.js "type=" Text/javascript "></script>
<script type= "Text/javascript" >
$ (function () {
$ ("Button:eq (0)"). Click (function () {
$ ("#panel")
. Animate ({height: "150"}, 2000)
. Animate ({width: "300"}, 2000)
. Hide (3000)
. Animate ({height: "show", Width: "Show", Opacity: "Show"}, 2000)
. Animate ({height: "500"}, 2000);
});
$ ("Button:eq (1)"). Click (function () {
$ ("#panel"). Stop ();//stops the current animation and continues the next animation
});
$ ("Button:eq (2)"). Click (function () {
$ ("#panel"). Stop (true);//Clears all animations of an element
});
$ ("Button:eq (3)"). Click (function () {
$ ("#panel"). Stop (false,true);//Let the current animation go directly to the end state and continue to the next animation
});
$ ("Button:eq (4)"). Click (function () {
$ ("#panel"). Stop (true,true);//Clears all animations of the element so that the current animation reaches the end state directly
});
})
</script>
<body>
<button> start a series of animations </button>
<button>stop () </button>
<button>stop (True) </button>
<button>stop (false,true) </button>
<button>stop (true,true) </button>
<div id= "Panel" >
<div class= "Content" >
Xiahou Dun's eyes, Lu Xun's associates, Guojiashima a deep foundation
</div>
</div>
</body>
2. Determine if the element is in an animated state
When using the animate () method, avoid animations that result from the accumulation of animations that differ from the user's behavior.
The phenomenon. Animation accumulates when the user quickly performs animate () animations on an element.
The workaround is to determine if the element is in an animated state, and to add a new animation to the element when it is not in the animated state.
Usage:
if (!$ (Element). Is (": Animated")) {
Add a new animation
}
jquery animation effects
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
