Example tutorial on animation in jquery

jQuery Animation

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!