jquery动画----逆战

一、内置动画

1.show动画------显示动画

$("#btn1").click(function() {
        $(".box").show();
    });

解析：show()方法是显示所有隐藏元素(元素默认从左上角慢慢显示出来)，可与css中的display:none配合使用
show()方法中有三个参数：
第一个参数：规定显示效果的速度（可选，毫秒）；
第二个参数：规定在动画的不同点上元素的速度。默认值为 “swing”(可选)；
第三个参数:show() 方法执行完之后，要执行的函数。
2.hide动画------隐藏动画

$("#btn1").click(function() {
        $(".box").hide();
    });

解析：隐藏被选元素，参数为hide(‘毫秒’,’'速度,‘回调函数’)；
3.toggle动画------隐藏显示切换动画

 $("#btn1").click(function() {
        $(".box").toggle();
    });

解析：如果元素本身是显示，点击将其隐藏；如果元素本身是隐藏，点击可将其显示。参数也是三个参数，toggle(‘毫秒’,’'速度,‘回调函数’)；
4.slideDown动画------下拉显示

 $("#btn1").click(function() {
        $(".box").slideDown();
    });

解析：元素本身是被隐藏的，通过slideDown()方法，可以下拉显示该元素
参数：slideDown(‘毫秒’,’'速度,‘回调函数’);
5.slideUp动画------上拉隐藏

$("#btn1").click(function() {
        $(".box").slideUp();
    });

解析：元素本身被显示，通过slideUp()方法，可以上拉隐藏
参数：slideUp(‘毫秒’,’'速度,‘回调函数’);
6.slideToggle动画------上下切换动画

 $("#btn1").click(function() {
        $(".box").slideToggle();
    });

解析：如果元素是显示的，点击可上拉隐藏；如果元素是隐藏的，点击可下拉显示。参数：slideToggle(‘毫秒’,’'速度,‘回调函数’);
7.fadeIn动画------淡入动画

 $("#btn1").click(function() {
        $(".box").fadeIn();
    });

解析：元素本身被隐藏，通过fadeIn()方法可以使元素逐渐显示出来。
参数：fadeIn(‘毫秒’,’'速度,‘回调函数’);
8.fadeOut动画------淡出动画

 $("#btn1").click(function() {
        $(".box").fadeOut();
    });

解析：fadeOut()方法用于淡出可见元素。
参数：fadeOut(‘毫秒’,’'速度,‘回调函数’);
9.fadeToggle动画------淡出淡入动画

$("#btn1").click(function() {
        $(".box").fadeToggle();
    });

解析：当元素淡出后，使用fadeToggle()可以使元素添加淡入的效果；当元素淡入后，使用fadeToggle()可以使元素添加淡出的效果。
参数：fadeToggle(‘毫秒’,’'速度,‘回调函数’);
10.fadeTo动画------变化到指定的透明度

$("#btn1").click(function() {
        $(".box").fadeTo(1000, 0.3);
    });

解析：fadeTo方法用于将显示的元素渐变到设置的透明度大小
注意：透明度的值介于0~1之间；fadeTo()方法没有默认参数，所以必须要写Time
参数：fadeTo(‘毫秒’,“透明度”,’'速度,‘回调函数’);

二、自定义动画

1.animate动画------自定义动画

$("#btn1").click(function() {
        $(".box").animate({
            width: 400,
            height: 400
        });
    });

解析：animate()用户自定义创建动画。
参数：第一个参数：元素可操作的css属性，(animate()方法可以操作一个或多个css属性，并且该方法可以操作几乎所有的css属性，注意：如padding-left必须写成paddingLeft等)
第二个参数：规定显示效果的速度（可选，毫秒）；
第三个参数：规定在动画的不同点上元素的速度；
第四个参数：执行完之后，要执行的函数。

$("#btn1").click(function() {
        $(".box").animate({
            left: 600
        }).animate({
            top: 600
        }).animate({
            left: 0
        }).animate({
            top: 30
        })
    });

解析：实现元素根据所设置的自由移动，即先向右，之后往下，再之后向左，最后向上运动，回到起始点。
2.stop()动画------当前动画直接停止，并且停在当前位置，之后立即执行下一个动画

 $(".box").slideUp(2000);
    $("#btn1").click(function() {
        $(".box").stop();
    });

解析：当前元素正在运动时，执行stop()后，元素会立即停止运动，并且停止在当前的位上
3.finish()动画----动画直接执行至终止状态

   $(".box").animate({
        width: 400,
        height: 400

    }, 3000);
    $("#btn1").click(function() {
        $(".box").finish();
    });

解析：finish()用于当前动画正在运动，当执行finish()方法后，动画立即运动到最后的状态。