jquery（三：jquery的动画）

动画
一：1.显示
show()
参数：1.代表动画执行的时长，毫秒数，也可以是代表时长的字符串 fast normal slow

1.         2.代表方法执行完毕的回调函数

复制代码

默认的是：normal

1. $(function(){
2.     $('#div1').show(2000，function(){
3.         alert('动画执行完毕')
4.     })
5. })

复制代码

一：2.隐藏
hide()
参数：1.代表动画执行的时长，毫秒数，也可以是代表时长的字符串 fast normal slow

1.         2.代表方法执行完毕的回调函数

复制代码

默认的是：normal

1. $(function(){
2.     $('div1').hide(2000，function(){
3.         alert('动画执行完毕')
4.     });
5. })

复制代码

一：3.切换
toggle（）

1. $('#toggle').click(function(){
2.     $('#div1').toggle(1000);
3. })

复制代码

二：1.滑入
slideDown()
参数：1.代表动画执行的时长，毫秒数，也可以是代表时长的字符串 fast normal slow

1.         2.代表方法执行完毕的回调函数

复制代码

默认的是：normal 400ms

1. $(function(){
2.     $('#slideDown').click(function(){
3.         $('div1').slideDown(2000,function(){
4.             alert("滑出");
5.         });  
6.     })
7. })

复制代码

二：2.滑出
slideUp（）

1. $(function(){
2.     $('#slideUp').click(function(){
3.       $('div1').slideUp(2000,function(){
4.           alert("滑出了")；
5.       });  
6.     })
7. })

复制代码

二：3.切换
slideToggle()

1. $('#slideToggle').click(function(){
2.     $('#div1').slideToggle(1000);
3. })

复制代码

三：1.淡入
fadeIn()

1. $(function(){
2.    $('#fadeIn').click(function(){
3.        $('#div1').fadeIn(2000,function(){
4.            alert("淡入")；
5.        });
6.    });
7. })

复制代码

三：2.淡出
fadeOut（）

1. $(function(){
2.    $('#fadeOut').click(function(){
3.        $('#div1').fadeOut(2000,function(){
4.            alert("淡出")；
5.        });
6.    });
7. })

复制代码

三：3.切换
fadeToggle（）

1. $('#fadeToggle').click(function(){
2.     $('#div1').fadeToggle(1000);
3. })

复制代码

三：4.淡入到哪里
fadeTo()

1. $(function(){
2.    $('#fadeTo').click(function(){
3.        $('#div1').fadeTo(2000,0.5);
4.    });
5. })

复制代码

四：自定义动画
animate()
1.必选的对象，代表的是需要做动画的属性
2.可选的，执行动画的时长
3.可选的，代表的是缓动还是匀速   ----linear(匀速)  swing（缓速）默认是swing
4.动画的完毕的回调函数

1. $(function(){
2.     $('#lr800').click(function(){
3.         $('#div1').animate({
4.             left：800
5.         }，2000,'linear',function(){
6.             alert('动画执行完毕')；
7.         })
8.     })
9. })

复制代码

案例：
360开机动画：

1. $(function(){
2.     $('#closeButton').click(function(){
3.        $('#bottomPart').animate({
4.            height:0;
5.        },2000,function(){
6.            $('#box).animate({
7.                width:0
8.            },2000);
9.        }) ;
10.     });
11. })

复制代码

动画队列与停止动画
1.是否清除队列
2.是否跳转到最终效果
默认不写就是全flase

1. $(function(){
2.    $('#start').click(function(){
3.        $('#div1').slideDown(2000),slideUp(2000);
4.      
5.    }) ;
6.    $('#stop').click(function(){
7.        $('div').stop(true,true);
8.    })
9. });

复制代码

offset()和position（）方法
offset();获取距离document的位置
position（）：兑现包含了top和left的值，距离它的定位父级的位置

1. $(function(){
2.     $('#buttion').click(function(){
3.              $('#son).offset   
4.     });
5. });

复制代码

scrollLeft和scrollTop方法
得到的数据是看不见的，卷出去的宽高
设置元素被卷曲出去的宽高

1. $(function(){
2.    $('#buttion').click(function(){
3.        $('#div1').scrollLeft();
4.    }) ;
5. });

复制代码

案例
固定导航栏

1. $(function(){
2.    //给页面设置一个滚动事件
3.    //计算第一部分的高度
4.      var s2=$('.classtop').height();
5.    $(window).scroll(function(){
6.       //获得卷曲的距离
7.       var s1 =$(window).scrollTop();
8.       if(s1>=s2){
9.           //固定定位
10.           $('.nav').css({
11.               position:'fixed',
12.               top:0,
13.               letf:0
14.           })
15.           //设置第三部分的高度为第三部分的margin高度
16.           var s3 =$('nav2').height();
17.           $('#main').css({
18.               position:''static',
19.               top:0,
20.               left:0
21.           })
22.       }else{
23.            //固定定位
24.           $('.nav').css({
25.               position:'static',
26.               top:0,
27.               letf:0
28.           })
29.           //设置回原来的值
30.           $('main').css({
31.               marginTop:10
32.           })
33.       }
34.    });
35. });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！