jQuery 效果 - 动画

Posted 2020-06-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 效果 - 动画相关的知识，希望对你有一定的参考价值。

jQuery animate() 方法允许您创建自定义的动画。

语法：

1 $(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

示例：

1 $("button").click(function(){

2 $("div").animate({left:‘250px‘});

3 });

默认情况下，所有 html 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

示例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="jquery-2.2.0.min.js">
 5 </script>
 6 <script> 
 7 $(document).ready(function(){
 8   $("button").click(function(){
 9     $("div").animate({left:‘250px‘});
10   });
11 });
12 </script> 
13 </head>
14  
15 <body>
16 <button>开始动画</button>
18 <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
19 </div>
21 </body>
22 </html>

jQuery animate() - 生成动画的过程中可同时使用多个属性：

1 $("button").click(function(){
2   $("div").animate({
3     left:‘250px‘,
4     opacity:‘0.5‘,
5     height:‘150px‘,
6     width:‘150px‘
7   });
8 });

提示：几乎可以用 animate() 方法来操作所有 CSS 属性。不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

jQuery animate() - 可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

1 $("button").click(function(){
2   $("div").animate({
3     left:‘250px‘,
4     height:‘+=150px‘,
5     width:‘+=150px‘
6   });
7 });

技术分享

执行效果就是方块不断的扩大

可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

1 $("button").click(function(){

2 $("div").animate({

3 height:‘toggle‘

4 });

5 });

使用队列功能

如果希望在彼此之后执行不同的动画，那么要使用队列功能：

1 $("button").click(function(){
2   var div=$("div");
3   div.animate({height:‘300px‘,opacity:‘0.4‘},"slow");
4   div.animate({width:‘300px‘,opacity:‘0.8‘},"slow");
5   div.animate({height:‘100px‘,opacity:‘0.4‘},"slow");
6   div.animate({width:‘100px‘,opacity:‘0.8‘},"slow");
7 });

1 $("button").click(function(){
2   var div=$("div");
3   div.animate({left:‘100px‘},"slow");
4   div.animate({fontSize:‘3em‘},"slow");
5 });

以上是关于jQuery 效果 - 动画的主要内容，如果未能解决你的问题，请参考以下文章