详解JQuery动画

        我这是我在逆战班学习js的第六周，今天让我来给大家解释一下jQuery框架中的jQuery动画的应用及方式

        jQuery动画可以分为内置动画和自定义动画，下面让我们用代码来说明它的用法

一、jQuery动画的属性及功能

    1、animate(): 自定义动画效果的动画
    2、stop(): 停止动画
    3、delay：延迟执行动画
    4、finish()：直接运动到最后一个动画的终点

二、jQuery动画的参数

    1、animate()参数详解：
     （1）参数一：动画持续的时间，默认：400毫秒 （必须写）
     （2）参数二：运动速度，也叫运动方式：默认：swing(慢快慢) （选写）
     （3）参数三：回调函数 （选写）

    2、stop()参数详解
     （1）参数一： true 删除队列
                   false 没有删除队列
     （2）参数二： true 当前动画立即运动到终点
                   false 当前动画立即停止

    3、delay()参数详解
       直接就是延迟及时间

三、jQuery中常见的集中内置动画

    1、隐藏显示功能动画
     （1）hide()方法主要功能是将元素隐藏起来，前提要执行hide()方法的元素必须是显示的，能看见，也就是状态为display：block。如果元素执行hide()方法时没有参数，则该元素将被立即隐藏，没有动画效果，所以在执行时要写个时间参数，单位毫秒。再次hide方法执行过程中是把选中DOM元素的宽、高、透明度同时执行。

     （2）show()方法主要功能是将元素显示起来，前提要执行show()方法的元素必须是隐藏的，看不见，也就是状态为display：none。如果元素执行show()方法时没有参数，则该元素将被立即显示，没有动画效果，所以在执行时要写个时间参数，单位毫秒。再次show()方法执行过程中是把选中DOM元素的宽、高、透明度同时执行。

     （3）toggle()方法主要功能是元素的显示和隐藏之间的切换，它的功能是hide()方法和show()方法功能的组合，在执行时，先判断元素的状态，如果元素本身的状态是隐藏，那么它显示，如果元素本身状态为显示，那么它隐藏。如果没有参数，隐藏或显示将立即执行，内有动画效果。

     代码如下：

// (1) show() 显示动画 如果元素本身是display: none状态， 可以显示出来
$(" #btn").click(function(){
$(" #box"). show( 200, "linear", function(){
alert("动画结束了");
});
})
// (2)、hide() 隐藏动画如果元素本身是display:block的状态可以隐藏起来
$(" #btn").click(function(){
$(" #box"). hide( 200, "linear", function(){
alert("动画结束了");
});
})
// (3)、toggle动画 隐藏显示切换动画 如果元素本身是显示那么隐藏，如果本身是隐藏那么显示
$(" #btn").click(function(){
$(" #box"). toggle( 200, "linear", function(){
alert("动画结束了");
});
})

    2、下拉上拉功能动画
     （1）slideDown()方法主要功能是元素的下拉，也可以理解为下拉显示，前提要执行slideDown()方法的元素必须是隐藏的，看不见。如果没有参数，他的持续时间默认为400毫秒，它在执行过程中是改变元素的宽高。

     （2）slideUp()方法主要功能是元素的上拉，也可以理解为上拉隐藏，前提要执行slideUp()方法的元素必须是现实的，能看见。如果没有参数，他的持续时间默认normal ，代码400毫秒的延时，它在执行过程中是改变元素的宽高。

     （3）slideToogle()方法的主要功能是元素的下拉或上拉，也可以理解为下拉显示或上拉隐藏，在执行时，先判断元素的状态，如果元素本身的状态是隐藏，那么它下拉显示，如果元素本身状态为显示，那么它上拉隐藏。如果没有参数，他的持续时间默认值为normal ，代码400毫秒的延时，它在执行过程中是改变元素的宽高。

     代码如下：

// (1)slideDown动画 下拉显示 元素本身隐藏，下拉 显
$(" #btn").click(function(){
$(" #box"). slideDown( 200, "linear", function(){
alert("动画结束了");
});
})
// (2)slideUp动画 上拉隐藏 元素本身显示，上拉隐藏
$(" #btn").click(function(){
$(" #box"). slideUp( 200, "linear", function(){
alert("动画结束了");
});
})
// (3)slideToogle动画 上下切换动画 如果元素本身 显示则上拉隐藏，下拉显示
$(" #btn").click(function(){
$(" #box"). slideToogle( 200, "linear", function(){
alert("动画结束了");
});
})

    3、渐隐渐显动画
     （1）fadeIn()方法的主要功能是元素的显示，前提要执行fadeIn()方法的元素必须是隐藏的，看不见。如果没有参数时，它的持续时间默认为400毫秒，它的执行方式是，改变元素的透明度。

     （2）fadeOut()方法的主要功能是元素的隐藏，前提要执行fadeOut()方法的元素必须是显示的，看的见。。如果没有参数时，它的持续时间默认为400毫秒，它的执行方式是，改变元素的透明度。

     代码如下：

// (1)fadeIn动画 逐渐显示动画(淡入)元素本身隐藏
$(" #btn").click(function(){
$(" #box").fadeIn( );
})
// (2)fadeOut动画 逐渐 隐藏动画(淡出)元素本身显示
$(" #btn").click(function(){
$(" #box").fadeOut( );
})
// (3)fadeToogle动画 渐隐渐现动画
$(" #btn").click(function(){
$("#box"). fadeToggle(200,"linear" , function(){
alert("动画结束了")
});
})

     （3）fadeTo动画 它的主要功能是淡出和淡入，它在执行淡出和淡入功能时执行的是自身元素的透明度，有参数二控制执行到多少的透明度，它有两个必须要写的参数，参数一，动画时序时间，参数二是要改变到多少的透明度，注意透明度在0~1之间(此时第二个参数为透明度)。

     代码如下：

$(" #btn").click(function(){
$("#box"). fadeTo(1000,0.2,"linear" , function(){
alert("动画结束了")
});
})

四、自定义动画

需求：让一个小方块沿四个边缩小，并在中心消失
通过控制元素的left,right,top,bottom等方向的像素，以一定的时间和速度来运动，达到视觉效应的动画，在项目中按照自己要达到的效果设计相应的参数，注意给那个元素加自定义动画，这个元素要设置定位

     代码如下：

$("#btn").click(function(){
$("#box").animate({
width:0,
height:0,
left:50,
top:80
},2000,function(){
alert("自定义动画结束了")；
})；
})

五、动画的控制

    1、delay()：延迟执行动画
       执行动画延迟时，可以传入参数，其参数主要弄功能是用于设定队列中下一个动画的延迟执行时间，持续的时间是以毫秒为单位，默认400毫秒的延时

     代码如下：

$("#btn").click(function(){
$("#box").delay(2000).animate({
left:1000
}).delay(1000).animate({
top:600
}).delay(3000).animate({
left:0
}).delay(4000).animate({
top:30
})
})

    2、stop(): 停止动画
       Stop()的方法主要是停止动画的执行，他有两个参数，都为布尔值，其功能如下:　
            stop(false,false)表示停止执行当前动画，队列中后续动画接着进行
　　        stop(true,false)表示停止执行当前动画，队列中后续动画不再进行
　　        stop(false,true)表示当前动画立即完成，队列中后续动画接着进行
　　        stop(true,true)表示当前动画立即完成，队列中后续动画不再进行

     代码如下：

// btn,启动动画的按钮，点击按钮动画启动
$("#btn").click(function(){
$("#box").animate({
left:1000
}).animate({
top:600
}).animate({
left:0
}).animate({
top:30
})
})
// btn1，停止动画按钮,点击按钮动画停止
$("#btn1").click(function(){
$("#box").stop(true,false);
})

    3、finish()：直接运动到最后一个动画的终点
       finish()方法的功能为停止当前正在运行的动画，删除所有排队的动画，其功能和stop(true，true)功能相似，清除队列，并且当前正在执行的动画跳转到其最终值。

     代码如下：

// btn,启动动画的按钮，点击按钮动画启动
$("#btn").click(function(){
$("#box").animate({
left：700
}).animate({
top:500
}).animate({
left:0
}).animate({
top:30
})
})
// btn1，停止动画按钮,点击按钮动画停止
$("#btn1").click(function(){
$("#box").finish();
})

六、动画的执行顺序（不同元素间的同步执行）

    需求：box1的方块先走，box2的方块在box1方块运动完毕后运动

    控制box1和box2的一前一后运动，当box1第一的动画到达终点后，box2执行第一个动画，然后依次执行box1的第二个动画，box2的第二个动画…当前一个元素动画结束后，后一个元素在执行动画，存在异步，可利用回调地狱执行，有因其存在异步，可利用JS中的Promise解决回调地狱中的异步

     （1）利用回调地狱解决

     代码如下：

// #btn,启动动画的按钮，点击按钮动画启动
// #box，是要执行动画的第一个小方块
// #box1，是要执行动画的第二个小方块
$("#btn").click(function(){
$("#box").animate({
left:600
},function(){
$("#box1").animate({
left:500
},function(){
$("#box").animate({
top:600
},function(){
$("#box1").animate({
top:500
},function(){
$("#box").animate({
left:0
},function(){
$("#box1").animate({
left:100
},function(){
$("#box").animate({
top:30
},function(){
$("#box1").animate({
top:130
})
})
})
})
})
})
})
})
})

     （2）利用Promise解决回调地狱，封装

     代码如下：

// 验证
move($("#box"),{
left:600
}).then(()=>{
return move($("#box1"),{
left:500
})
}).then(()=>{
return move($("#box"),{
top:600
})
}).then(()=>{
return move($("#box1"),{
top:500
})
}).then(()=>{
return move($("#box"),{
left:0
})
}).then(()=>{
return move($("#box1"),{
left:100
})
}).then(()=>{
return move($("#box"),{
top:30
})
}).then(()=>{
return move($("#box1"),{
top:130
})
})
// 封装函数
function move(ele,tar,tim){
time = time || 300;
return new Promise((resolve)=>{
ele.animate(tar,time,()=>{
resolve("动画已结束")；
})；
})
}

最后

以上就是漂亮白羊为你收集整理的详解JQuery动画的全部内容，希望文章能够帮你解决详解JQuery动画所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。