Home > Article > Web Front-end > Example tutorial on animation in jquery
1. Zoom effect in the upper left corner
hide([speed,[fn]])
Overview: Hide the displayed elements
Parameters: speed: a string of one of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value indicating the duration of the animation (such as: 1000)
fn: in Function to be executed when the animation completes, once per element.
// $(":button[value=hide]").click(function(){
// $("div").hide(2000,function(){
// alert("div is hidden");
// });
// })
show([speed,[fn]])
Overview: Show hidden matching elements.
// $(":button[value=show]").click(function(){
// $("div").show(2000,function(){
// alert("div is displayed");
// });
// })
toggle([speed],[fn])
Overview: If the element is visible, switch it to hidden; if the element is hidden, switch it to visible.
// //toggle([speed],[fn]) If the element is visible, switch to hidden; if the element is hidden, switch to visible
// $(": button[value=hidden]").click(function(){
// $("div").toggle(2000);
// })
2. Up and down scaling effect
slideUp(speed, [callback])
Overview: Dynamically hide all matches by changing height (decreasing upward) element, optionally triggering a callback function after hiding is completed.
Parameters: speed A string of one of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value indicating the animation duration (such as: 1000) callback (optional) in The function executed when the animation is completed
//slideUp(speed, [fn]) dynamically hides all matching elements through height changes (decreasing upwards), and optionally triggers a callback function after the hiding is completed
// $(":button[value=hidden]").click(function(){
// $("div").slideUp(2000);
// })
slideDown(speed, [callback])
Overview: Dynamically display all matching elements through height changes (increase downward), and optionally trigger a callback function after the display is completed.
// //slideDown(speed, [fn]) Dynamically displays all matching elements through height changes (increasing downward), and optionally triggers a callback function after the display is completed
// $(":button[value=display]").click(function(){
// $("div").slideDown(2000);
// })
slideToggle([speed],[fn])
Overview: Toggle the visibility of all matching elements through height changes, and optionally trigger a callback function after the switch is completed.
//slideToggle([speed],[fn]) Toggles the visibility of all matching elements through height changes, and optionally triggers a callback function after the switch is completed
// $(" :button[value=hidden]").click(function(){
// $("div").slideToggle(2000);
// })
3. Fade effect (change in opacity)
fadeOut(speed, [callback])
Overview: All are achieved through changes in opacity Matches the element's fade-out effect and optionally triggers a callback function after the animation completes.
// $(":button[value=hide]").click(function(){
// $("div").fadeOut(2000);
// } )
fadeIn(speed, [callback])
Overview: Achieve the fade-in effect of all matching elements through changes in opacity, and optionally trigger a callback function after the animation is completed.
$(":button[value=display]").click(function(){
// $("div").fadeIn(2000);
// })
fadeToggle([speed,[fn]])
Overview: Switch the fade-in and fade-out effects of all matching elements through changes in opacity, and optionally trigger a callback after the animation is completed function.
$(":button[value=hidden]").click(function(){
// $("div").fadeToggle(2000);
// })
fadeTo(speed,opacity,[fn])
Overview: Progressively adjust the opacity of all matching elements to the specified opacity, and optionally trigger after the animation is completed A callback function.
// $(":button[value=Hide]").click(function(){
// $("div").fadeTo(2000,0.5);
/ / })
4. Custom animation
animate(params,[speed],[fn])
Overview: Functions for creating custom animations.
// $("div").animate({"left":"1000px"},2000);
stop([clearQueue], [gotoEnd ])
Overview: Stop all animations running on the specified element.
Parameters: clearQueue (optional) If set to true, the queue will be cleared. Animation can be ended immediately.
Series Gotond (optional) allows the currently executed animation to be completed immediately.
// $(document).click(function(){
// $("div").stop()
// })
delay(duration)
Overview: Set a delay to delay the execution of subsequent items in the queue.
Parameter duration delay time, unit: milliseconds
// $("div").delay(2000).animate({"left":"1000px"},2000);
The above is the detailed content of Example tutorial on animation in jquery. For more information, please follow other related articles on the PHP Chinese website!