JQ动画效果

一看到动画效果我就激动的不行，很多人学JS可能都是为了特效，duang~duang~，好啦，下面我就记录下我在李炎恢老师视频中学的动画，在这里记下笔记
首先我们常用的动画有，显示与隐藏，滑动与卷动，淡入与，自定义动画等。在下面还会记下方法如列队动画方法，那就开始咯

首先是几个基本动画

显示和隐藏

//.show()，可以传参控制速度等有slow nromal fast或者是毫秒数，还可以传入回掉函数$('div')click(function(){    $('#div').show(1000,function(){        alert('1');    });//速度1秒完成,完全显示出来后弹窗})//.hide()$('div')click(function(){    $('#div').hide('fast',function(){        alert('2')    });//速度1秒完成,隐藏后弹窗})//还有一些高级用法-调用自身//如果我们有多个地方需要动画，并且不希望他们同时显示，那我们就需要列队动画，让他们排着队的出来//列队动画,递归自调用$('div').click(function(){    $('.div').first().show('fast',function testShow(){        $(this).next().show('fast',testShow);    })})$('div').click(function(){    $('.div').last().hide('fast',function testShow(){        $(this).prev().hide('fast',testShow);    })})//如果是匿名函数怎么调用自身呢$('div').click(function(){    $('.div').last().hide('fast',arguments.callee);})//下面就是组合按钮，toggle$('div').click(function(){    $(div).toggle('fast');})

滑动和滚动，参数和显示隐藏是一样的！！

$('div').click(function(){    $(div).slideUp('fast');})$('div').click(function(){    $(div).slideDown('fast');})$('div').click(function(){    $(div).slideToggle('fast');})

淡入淡出

$('div').click(function(){    $(div).fadeOut('fast');})$('div').click(function(){    $(div).fadeIn('fast');})$('div').click(function(){    $(div).fadeToggle('fast');})$('div').click(function(){    $(div).fadeTo('fast',0.3);//0-1之间  透明度到多少})

---

自定义动画因为基础动画无法满足我们的需求，所以出现了自定义动画.animate()

$('.button').click(function(){    $('#div').animate({//同步的        width:'300px',        height:'200px',        opacity:0.5,        fontSize:'50px'    },1000,function(){        alert('1');    });})//当然我们也可以让位置变换，需要我们在CSS设置绝对定位，这样我们就可以使用top，left来控制位置$('.button').click(function(){    $('#div').animate({        left:'300px',        top:'200px',    },1000)})//上面的只有第一次点击才有效，如何实现多次点击都有效呢$('.button').click(function(){    $('#div').animate({        left:'+=300px',        top:'+=200px',    },1000)})//自定义队列动画，我们可以通过回掉函数不停地嵌套来实现但是太多容易乱$('.button').click(function(){    $('#div').animate({        width:'300px'    },function(){        $('#div').animate({            height:'200px'        })    })})//还有一种方法就是连缀和顺序执行，但必须是同一个元素的基础上使用连缀和顺序排列$('.button').click(function(){        $('#div').animate({width:'300px'})                 .animate({height:'200px'})                 .animate({opacity:0.5});})$('.button').click(function(){//顺序执行        $('#div').animate({width:'300px'});        $('#div').animate({height:'200px'});        $('#div').animate({opacity:0.5});})//如果作用在不同元素上，就不能一一执行，就会分别开始执行自己的，不过分别是列队动画$('.button').click(function(){        $('#div').animate({width:'300px'});        $('#div1').animate({height:'200px'});        $('#div').animate({opacity:0.5});})//这样我们就需要使用队列动画方法才能实现多种元素的队列动画，先看一个CSS列子$('.button').click(function(){    $('#div').slideUp('slow').slideDown('slow').css("backgroud","red");})//这样会出现什么效果呢，先执行CSS，之后在执行动画方法//queue方法便可以实现，但无法在后面直接家方法，类似连缀那种，但他有自己的传参实现$('.button').click(function(){    $('#div')            .slideUp('slow')            .slideDown('slow')            .queue(function(next){                $(this).css("backgroud","red");                next();            })            .hide('1000');});//这个函数也可以算队列里的长度$('#div').queue('fx').length//参数一定要传这个，每执行一个就会从队列中减少一个//清理运动，当有无限运动是满足某条件时用到这个$('.button').click(function(){    $('#div')            .slideUp('slow')            .slideDown('slow',function(){$(this).clearQueue()})//清理            .queue(function(next){                $(this).css("backgroud","red");                next();            })            .hide('1000');});//有一个参数可以控制运动方式,但有很多需要插件，自带的有swing缓动和linear匀速，默认的是swing$('.button').click(function(){    $('#div').animate({        left:'800px'    },'slow','swing')})

---

动画相关方法
很多时候我们需要正在运行的动画，JQ提供了.stop()方法
.stop(clearQueue,gotoEnd) 第一个参数是一个布尔值，代表将未执行完的动画列表清空，第二个就是
将正在执行的动画直接跳转到当前动画的末位置，注意不是最后一个动画的末位置
stop

$('.button').click(function(){    left:'800px'},1000)$('.stop').click(function(){    $('#div').stop();//单纯停止})----------$('.button').click(function(){    $('#box').animate({left:'300px'})             .animate({bottom:'300px'})             .animate({top:'300px'})             .animate({right:'300px'})})$('.stop').click(function(){    $('#div').stop();//如果是列队动画停止的话，会停止第一个列队动画，执行后面的列队动画    $('#div').stop(true);//清除后面的动画，及完全停止默认值false    $('#div').stop(true,true);//直接到该步动画的末位置})

delay延时

$('.button').click(function(){    $('#box').animate({left:'300px'})             .animate({bottom:'300px'}).delay(2000)             .animate({top:'300px'})             .animate({right:'300px'})})

一个动画过滤器来判断哪个动画在运动 :animated

$('div').click(function(){    $(':animated').css("background","red");})

动画的全局属性

$.fx.interval=13//运行的帧数，越小越流畅，默认13，但越小对性能要求越高$.fx.off=true;//关闭动画，用来兼容，用处比较少$('.button').click(function(){    $('#div').toggle(1000)})