Home  >  Article  >  Web Front-end  >  Example tutorial on animation in jquery

Example tutorial on animation in jquery

巴扎黑
巴扎黑Original
2017-06-26 15:09:581039browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn