jQuery-动画结果浅析

动画能够给网站的用户体验加分，让网页越发生动。不过，什么东西都须要适当，浅易快速的动画会给网站加分不少。比方购物网站的个人中间按钮hover结果啊，种种hover发生的动画等。不过，如今CSS3的新特征能够模仿许多动画，能够多用CSS3去完成一些动画结果了。比方box-shadow，text-shaow，animation，transform等。jquery作为全明星级别插件，是有很强的动画功用的。

全局属性

jQuery在动画中供应了两个全局属性（不常在代码中运用），离别为：
$.fx.interval，设置每秒运转的帧数，默许13ms，越小越流通，但太小消耗浏览器机能
$.fx.off，封闭页面上一切的动画，浏览器不支持动画时能够悉数关掉。

$.fx.interval = 100; //默许为13
$.fx.off = true; //默许false

那末，我们看看jquery都供应了哪些动画要领。

显现&&隐蔽

jQuery 中显现要领为：.show(speed,callback)，隐蔽要领为：.hide(speed,callback)。在无参数的时刻，只是硬性的显现内容和隐蔽内容。

$('.show').click(function () { 
    $('.xzavier').show();
});
$('.hide').click(function () { 
    $('.xzavier').hide();
});

两个可选参数。参数speed，毫秒，示意活动所花时候，用速率来讲更符合动画一词。能够是number，也能够是这个三个参数字符串：slow、normal 和fast，离别对应600ms、400 ms和200ms。假如传参毛病或许不传，默许normal，即400ms。参数callback代表回调函数。

$('.show').click(function () {
    $('.xzavier').show('fast'); 
});
$('.show').click(function () {
    $('.xzavier').show('');   //normal
});

$('.show').click(function () {
    $('.xzavier').show('fast', function () {
        console.log('animation is over');  //其他可实行代码
    });
});

原理上，.hide(speed,callback)要领实在就是在行内设置CSS 代码：display:none; 而.show(speed,callback)要领要根据本来元素是区块照样内联来决议，假如是区块，则设置CSS 代码：display:block; 假如是内联，则设置CSS 代码：display:inline。

.show()和.hide()的在统一元素的时刻，须要一个按钮切换操纵，或许须要举行一些前提判
断。而jQuery 供应给我们一个相似功用的自力要领：.toggle(speed,callback)，自动切换。

$('.toggle').click(function () {
    $(this).toggle('fast');
});

压缩&&睁开

jQuery 供应了一组转变元素高度的要领：.slideUp(speed,callback)，向上压缩、.slideDown(speed,callback)，向下睁开和.slideToggle(speed,callback)，自动切换。

$('.slidedown').click(function () {
    $('.xzavier').slideDown('slow');
});
$('.slideup').click(function () {
    $('.xzavier').slideUp();
});
$('.slidetoggle').click(function () {
    $('.xzavier').slideToggle('fast');
});

淡入&&淡出

jQuery 供应了一组特地用于透明度变化的要领：.fadeIn(speed,callback)，淡入、.fadeOut(speed,callback)，淡出、.fadeToggle(speed,callback)，自动切换。

$('.fadein').click(function () {
    $('.xzavier').fadeIn('slow');
});
$('.fadeout').click(function () {
    $('.xzavier').fadeOut();
});
$('.fadetoggle').click(function () {
    $('.xzavier').fadeToggle('fast');
});

这三个要领只能透明度变化只能从0 到100，或许从100 到0。不能自己设定变化到一个值。不过，jQuery供应了.fadeTo(speed,opacity，callback)要领处理了这个题目。

$('.fadeto').click(function () {
    $('.xzavier').fadeTo('1000', 0.4); //0.4代表上面要领的30
});

假如自身透明度大于指定值，会淡出，不然相反。

自定义动画

jQuery供应了几种简朴经常使用的牢固动画要领供开辟运用。跟着营业逻辑的庞杂，这些简朴动画没法满足我们越发庞杂的需求。这时候，开辟能够运用jQuery供应了一个.animate(params,speed,easing,callback);要领来建立我结果更加庞杂的自定义动画。
参数为：CSS变化款式的对象（必传），速率（可选），回调函数（可选）。easing背面诠释。

.xzavier {width:200px;height:100px;opacity:1;}
$('.animate').click(function () {
    $('.xzavier').animate({
        'width' : '800px',
        'height' : '400px',
        'opacity' : 0.3
    });
});

class为xzavier的盒子多重动画同步活动。变宽，变长，变淡。

$('.animate').click(function () {
    $('.xzavier').animate({
        'top' : '400px', 
        'left' : '200px'
    });
});

假如元素位置须要活动变化，须要设置元素的position为absolute。

jQuery还供应了自定义动画的累加、累减功用。

$('.animate').click(function () {
    $('.xzavier').animate({
        'top' : '+=100px',
        'left' : '+=100px'
    });
});

包含jquery牢固的几个动画在内，都有可选参数easing，即活动体式格局，seasing有两个值：swing(缓动)、linear(匀速)，默许为swing。不过这个参数很少用到O(∩_∩)O~

$('.animate').click(function () {
    $('.xzaiver').animate({
        left : '800px'
    }, 'slow', 'swing');
    $('.xzavier').animate({
        top : '40px'
    }, 'fast', 'linear');
});

排队动画

自定义完成排队动画的体式格局，有3种：
1.在回调函数中再实行一个动画

$('.animate').click(function () {
    $('.xzavier').animate({
        'left' : '800px'
    }, function () {
        $('.xzavier').animate({
            'top' : '400px'
        }, function () {
            $('.xzavier').animate({
                'opacity' : 0.3
            });
        });
    });
});

2.经由过程联缀来完成排队动画

$('.animate').click(function () {
    $('.xzavier').animate({
        'left' : '800px'
    }).animate({
        'top' : '400px'
    }).animate({
        'opacity' : 0.3
    });
});

3.经由过程递次来完成排队动画（须要时统一元素动画，不然，就是同步动画）

$('.animate').click(function () {
    $('.xzavier').animate({'left' : '100px'});
    $('.xzavier').animate({'top' : '100px'});
    $('.xzavier').animate({'opacity' : 0.3});
});

如许来看，我们更倾向于背面两种写法，由于嵌套多了就涌现了}}}}}}}}}}

联缀非动画要领

先看个题目：

//联缀
$('.xzavier').slideUp().slideDown().css('background', '#ccc');

这内里css要领并非动画要领，不会排在排队以后实行，然则，我们又须要它在前面动画实行以后再实行。这是，肯定会想到采用回调函数来处理。

$('.xzavier').slideUp().slideDown(function () {
    $(this).css('background', '#ccc');
});

确切能够处理题目，然则当排队动画变多时，回调函数}}}}}}}}}}的可读性大大下降确切一个异常烦人的题目。jQuery 供应了一个相似于回调函数的要领：.queue()。.queue()要领将css要领追随动画要领以后。假如还需继承挪用动画要领，运用.dequeue()要领。

$('.xzavier').slideUp();
$('.xzavier').slideDown();
$('.xzavier').queue(function () {
    $(this).css('background', '#ccc');
    $(this).dequeue();
})
$('.xzavier').hide('slow');

住手动画&&耽误动画

住手正在运转中的动画：.stop()要领。可选参数：clearQueue, gotoEnd。clearQueue 通报一个布尔值，代表是不是清空未实行完的动画排队，gotoEnd 代表是不是直接将正在实行的动画跳转到末状况。

$('.stop').click(function () {
    $('.xzavier').stop(true ,true);
});

耽误实行动画：.delay()要领。能够在动画之前设置耽误，也能够在排队动画设置。

$('.animate').click(function () {
    $('.xzavier').delay(1000).animate({
        'opacity' : 0.3
    }, 1000);
    $('.xzavier').delay(1000).animate({
        'width' : '800px'
    }, 1000);
    $('.xzavier').animate({
        'height' : '400px'
    }, 1000);
});

周末好天气，打篮球去咯。代码，篮球，生涯…