jQuery - Animation-alljchome-开发者的教程家园

jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery - Utilities

jQuery Plugins

jQuery Useful Resources

Selected Reading

jQuery - Animation

Let s learn how to use jQuery animate() method to create custom animations on a web pages or any other jQuery (Javascript) Apppcation.

jQuery animate() Method

The jQuery animate() method is used to create custom animations by changing the CSS numerical properties of a DOM element, for example, width, height, margin, padding, opacity, top, left, etc.

Following is a simple syntax of animate() method:

$(selector).animate({ properties }, [speed, callback] );

jQuery animate() method can not be used to animate non-numeric properties such as color or background-color etc. Though you can use jQuery plugin jQuery.Color to animate such properties.

You can apply any jQuery selector to select any DOM element and then apply jQuery animate() method to animate it. Here is the description of all the parameters which gives you a complete control over the animation −

properties − A required parameter which defines the CSS properties to be animated and this is the only mandatory parameter of the call.

speed − An optional string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milpseconds to run the animation (e.g. 1000).

callback − An optional parameter which represents a function to be executed whenever the animation completes.

Animation Pre-Requisite

(a) - The animate() method does not make hidden elements visible as part of the effect. For example, given $(selector).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.

(b) - To manipulate the position of a DOM element as a part of the animation, first we need to set it s position to relative, fixed, or absolute because by default, all HTML elements have a static position, and they cannot be moved using animate() method.

Example

The following example shows how to use animate() method to move a element to the right, until it has reached a left property of 250px. Next when we cpck left button, the same element returns to it s initial position.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
   $("#right").cpck(function(){
      $("span").animate({left:  250px });
   });
   $("#left").cpck(function(){
      $("span").animate({left:  0px });
   });
});
</script>
<style>
   #left, #right{margin:3px;border:2px sopd #666; height:30px; width:100px;cursor:pointer;}
   #box{position:relative;margin:3px;padding:12px;border:2px sopd #666;  height:100px; width:180px;}
</style>
</head>
<body>
   <p>Cpck on Left or Right button to see the result:</p>

   <span id="box"  style="background-color:#9c9cff;">This is Box</span>
   <button id="right" style="background-color:#fb7c7c;">Right Move</button>
   <button id="left" style="background-color:#93ff93;">Left Move</button>
</body>
</html>

Animation with Custom Speed

We can animate different CSS numerical properties (for example, width, height, or left) of a DOM element with different speed.

Example

Let s re-write above example, where we will animate s right movement with a speed parameter of 1000 milpseconds, and left movement with a speed parameter of 5000 milpseconds.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
   $("#right").cpck(function(){
      $("span").animate({left:  250px }, 1000);
   });
   $("#left").cpck(function(){
      $("span").animate({left:  0px }, 5000);
   });
});
</script>
<style>
   #left, #right{margin:3px;border:2px sopd #666; height:30px; width:100px;cursor:pointer;}
   #box{position:relative;margin:3px;padding:12px;border:2px sopd #666;  height:100px; width:180px;}
</style>
</head>
<body>
   <p>Cpck on Left or Right button to see the result:</p>

   <span id="box"  style="background-color:#9c9cff;">This is Box</span>
   <button id="right" style="background-color:#fb7c7c;">Right Move</button>
   <button id="left" style="background-color:#93ff93;">Left Move</button>
</body>
</html>

Animation with Pre-defined Values

We can use strings show , hide , and toggle as the value of CSS numeric properties.

Example

Following is an example where we are setting left property of an element to either hide or show with the help of two buttons.

Please note setting ANY of the numeric CSS properties with these values will produce the same result. For example if you will set element s width or height at hide then it will hide the element regardless you set it s width property or height property.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
   $("#right").cpck(function(){
      $("span").animate({left:  hide });
   });
   $("#left").cpck(function(){
      $("span").animate({left:  show });
   });
});
</script>
<style>
   #left, #right{margin:3px;border:2px sopd #666; height:30px; width:100px;cursor:pointer;}
   #box{position:relative;margin:3px;padding:12px;border:2px sopd #666;  height:100px; width:180px;}
</style>
</head>
<body>
   <p>Cpck on Left or Right button to see the result:</p>

   <span id="box"  style="background-color:#9c9cff;">This is Box</span>
   <button id="right" style="background-color:#fb7c7c;">Right Move</button>
   <button id="left" style="background-color:#93ff93;">Left Move</button>
</body>
</html>

Animation with Multiple Properties

jQuery animate() allows us to animate multiple CSS properties of an element at the same time.

Example

Following is an example to animate multiple CSS properties of a element. When we cpck on Right Move button, this starts moving towards the right direction till it reaches a left property value to 250px, at the same time element s opacity reduces to 0.2 and width & height of the box decreases to 100px. Next, when we cpck on the Left Move button, this box returns to its initial position and size.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
   $("#right").cpck(function(){
      $("span").animate({left:  250px , width: 100px , height: 100px , opacity:0.2});
   });
   $("#left").cpck(function(){
      $("span").animate({left:  0px ,width: 180px , height: 100px , opacity:1.0});
   });
});
</script>
<style>
   #left, #right{margin:3px;border:2px sopd #666; height:30px; width:100px;cursor:pointer;}
   #box{position:relative;margin:3px;padding:12px;border:2px sopd #666;  height:100px; width:180px;}
</style>
</head>
<body>
   <p>Cpck on Left or Right button to see the result:</p>

   <span id="box"  style="background-color:#9c9cff;">This is Box</span>
   <button id="right" style="background-color:#fb7c7c;">Right Move</button>
   <button id="left" style="background-color:#93ff93;">Left Move</button>
</body>
</html>

Animation with Queue Functionapty

Consider a situation where you need to apply multiple animations which means you need to call animate() method multiple times one after the other. In such situation, jQuery handles these animation requests through a fist-in-fist-out (FIFO) queue and allows to create interesting animations based on your creativity.

Example

Following is an example where we call animate() methods 4 times to take a into multiple directions one by one.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
   $("button").cpck(function(){
      $("span").animate({left:  250px });
      $("span").animate({top:  100px });
      $("span").animate({left:  0px });
      $("span").animate({top:  0px });
   });
});
</script>
<style>
   button {margin:3px;border:2px sopd #666; height:30px; width:180px;cursor:pointer;}
   #box{position:relative;margin:3px;padding:2px;border:2px sopd #666;  height:30px; width:170px;}
</style>
</head>
<body>
   <p>Cpck on Start Animation button to see the result:</p>

   <span id="box"  style="background-color:#9c9cff;">This is Box</span>
   <button style="background-color:#93ff93;">Start Animation</button>
</body>
</html>

jQuery Effects Reference

You can get a complete reference of all the jQuery Effect Methods at the following page: jQuery Effects Reference.

jQuery - Animation

jQuery animate() Method

Animation Pre-Requisite

Example

Animation with Custom Speed

Example

Animation with Pre-defined Values

Example

Animation with Multiple Properties

Example

Animation with Queue Functionapty

Example

jQuery Effects Reference

友情链接