jquery 动画

大家是不是认为实现js的动画用原生js实现有些繁琐呢？今天我们就尝试使用jquery来实现一下。

1 显示

Hide()：隐藏

将高度、宽度、透明度变为0，display为none；

Show()：显示

将高度、宽度、透明度变为初始的CSS样式，display为block

Toggle：切换

将Hide和Show结合起来，如果display为none时，点击后为block

                        如果display为block时，点击后为none

作业：把jquery变为js

2 淡入淡出

fadeIn():淡入

将隐藏的样式通过改变其透明度（0-1），让他显示出来。

fadeOut（）：淡出

将显示的样式通过改变透明度（1-0），使他隐藏。

fadeToggle（）：淡入淡出的切换

如果样式隐藏，则将他显示出来，反之，使他隐藏。

fadeTo（）：固定其透明度（0-1）；

3 上滑下滑。

slideUp():上滑。

将设置的高度从初始变为0，然后隐藏。

SlideDown（）：下滑。

将高度从0变为设置的高度，然后显示。

slideToggle():上下滑切换，然后隐藏或显示。

4 动画

自定义动画

移动一个块到另一个位置

$("#bt1").click(function(){
   $("#div1").animate({
       //设置多个css属性
       left:'200px',
       top:'100px',
   });

同时使用多个属性实现动画效果，（移动位置、颜色淡化，大小转变）

    $("#bt1").click(function(){
        $("#div1").animate({
            left:'200px',
            top:'100px',
            width:'+=100px',
            height:'+=100px',
            opacity:'0.5    '
        })
    });

改变预定义值来实现内容的显示或隐藏

$("#div1").animate({
    height:'toggle'
});

.animate（）中有三个参数

第一参数是需要改变的样式

第二个参数是显示的速度（slow、fast、指定毫秒数）

第三个参数是回调函数

var div = $("#div1")
$("#start").click(function(){
    div.animate({ height:'300px'});
    div.animate({ width:'300px'});
    div.animate({height:'500px'});
    div.animate({ wifth:'500px' });
});
$("#stop").click(function(){
    div.stop(true);
});

就问你简不简单，丰不丰富！！

当然原生js也是要认真学习的，要不然你的路也走不了多长。