微信扫一扫打赏支持

jquery-12 animate()如何使用（实例）

jquery-12 animate()如何使用（实例）

一、总结

一句话总结：动画的本质其实就是样式的改变+时间，所以animate()方法最常用的两个参数也是这个。

 

1、如何实现图片向左消失的动画？

margin-left变负的整图长，并且透明度opacity设置为0，会有透明度逐渐变为0的效果

36     $('img').animate({
37         'margin-left':'-1300px',
38         'opacity':0,
39     },1000);

 

 

2、animate()方法如何使用？

常用两参数，一个是变化的样式，一个是动画持续的时间

35 $('button').eq(0).click(function(){
36     $('img').animate({
37         'margin-left':'-1300px',
38         'opacity':0,
39     },1000);
40 });

params,[speed],[easing],[fn]Options,Number/String,String,FunctionV1.0

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数，每个元素执行一次。

 

3、animate()方法如何实现执行完动画后操作某个方法？

给animate()方法最后添加函数参数即可

 2 $('button').eq(0).click(function(){
 3     $('img').animate({
 4         'margin-left':'-1300px',
 5         'opacity':0,
 6     },1000,function(){
 7         $('body').css({'background':'#f00'});
 8     });
 9 });

 

4、如何实现向上渐隐的效果？

margin-top设置为负的图片高，动画样式的透明度设置为0，超出部分overflow设置为hidden

50     $('img').animate({
51         'margin-top':'-300px',
52         'opacity':0,
53     },1000);

 

 

二、animate()如何使用（实例）

animate()实现自定义动画

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10         .main{
11             width:1300px;
12             margin:0 auto;
13         }
14 
15         .img{
16             height:300px;
17             overflow: hidden;
18         }
19     </style>
20     <script src="jquery.js"></script>
21 </head>
22 <body>
23     <div class="main">
24         <div class="img">
25             <img src="c.jpg" alt="">
26         </div>
27         <br>
28         <button>左</button>
29         <button>右</button>
30         <button>上</button>
31         <button>下</button>
32     </div>
33 </body>
34 <script>
35 $('button').eq(0).click(function(){
36     $('img').animate({
37         'margin-left':'-1300px',
38         'opacity':0,
39     },1000);
40 });
41 
42 $('button').eq(1).click(function(){
43     $('img').animate({
44         'margin-left':'1300px',
45         'opacity':0,
46     },1000);
47 });
48 
49 $('button').eq(2).click(function(){
50     $('img').animate({
51         'margin-top':'-300px',
52         'opacity':0,
53     },1000);
54 });
55 
56 $('button').eq(3).click(function(){
57     $('img').animate({
58         'margin-top':'300px',
59         'opacity':0,
60     },1000);
61 });
62 </script>
63 </html>

animate()方法带执行完成事件

 1 <script>
 2 $('button').eq(0).click(function(){
 3     $('img').animate({
 4         'margin-left':'-1300px',
 5         'opacity':0,
 6     },1000,function(){
 7         $('body').css({'background':'#f00'});
 8     });
 9 });
10 </script>

 

 

 

 

 
posted @ 2018-06-29 18:38  范仁义  阅读(428)  评论(0)    收藏  举报