jquery动画详解_jqury动画参数-CSDN博客

本文链接：https://blog.csdn.net/m0_46375155/article/details/105115432

jquery动画详解
jquery封装了有特定效果的一些动画，为内置动画，内置动画无法满足客户或者程序员的需求，jquery又封装了自定义动画的接口函数，所以jquery动画有内置动画和自定义动画。
内置动画：

显示hide()/隐藏show()/显示或隐藏toggle()
代码如下：

<style>

#box{width: 100px;height: 100px;background: red;}

</style>

<body>

<input type="button" id="btn1" value="隐藏">

<input type="button" id="btn2" value="显示">

<input type="button" id="btn3" value="隐藏/显示">

</body>

<script>

$("#btn1").click(function(){

$("#box").hide();

})

$("#btn2").click(function(){

$("#box").show();

})

$("#btn3").click(function(){

$("#box").toggle();

})

</script>

上拉slideUp()/下拉slideDown()/上拉或下拉slideToggle()
代码如下：

<style>

#box{width: 100px;height: 100px;background: red;}

</style>

<body>

<input type="button" id="btn1" value="上拉">

<input type="button" id="btn2" value="下拉">

<input type="button" id="btn3" value="上拉/下拉">

</body>

<script>

$("#btn1").click(function(){

$("#box").slideUp();

})

$("#btn2").click(function(){

$("#box").slideDown();

})

$("#btn3").click(function(){

$("#box").slideToggle();

})

</script>

淡出fadeOut()/淡入fadeIn()/淡出或淡入fadeToggle()

代码如下：

<style>

#box{width: 100px;height: 100px;background: red;}

</style>

<body>

<input type="button" id="btn1" value="淡入">

<input type="button" id="btn2" value="淡出">

<input type="button" id="btn3" value="淡入/淡出">

</body>

<script>

$("#btn1").click(function(){

$("#box").fadeOut();

})

$("#btn2").click(function(){

$("#box").fadeIn();

})

$("#btn3").click(function(){

$("#box").fadeToggle();

})

</script>

以上动画的参数：
参数1：动画运行的时间（毫秒）或控制速度的字符串可以省略
参数2：运动的方式如linear 可以省略
参数3：动画执行结束需要执行的函数可以省略
举个例子：（以上所有动画（1，2，3）同理）

$("#btn1").click(function(){
        $("#box").hide(200,"linear",function(){
            alert("动画结束了")
        });
    })

4.有点透明

<style>

#box{width: 100px;height: 100px;background: red;}

</style>

<body>

<input type="button" id="btn1" value="有点透明">

</body>

<script>

$("#btn1").click(function(){

  $("#box").fadeTo(1000,0.2);

})

参数1：动画运行的时间（毫秒）可以省略
参数2：透明度（0-1）不可省略
参数3：动画执行结束需要执行的函数可以省略

自定义动画：
JQuery提供了animate()方法，能够使开发者自定义动画。
代码如下：

 <style>

#box{width: 100px;height: 100px;position: absolute;left: 0;top:30px;background: red;}

</style>

<body>

<input type="button" id="btn" value="动画">

<div id="box"></div>

</body>

<script>

$("#btn").click(function(){

$("#box").animate({

width:0,

height:0,

left:50,

top:80

},2000,function(){

alert("结束了");

});

</script>

参数1：对象，即为希望进行变化的css属性的目标值，不可省略

参数2：:动画运动的时间，可省略

参数3：:回调函数，表示动画结束后要做的事情，可省略

自定义动画的控制：

1.delay：延迟执行动画

$("#box").delay(1000).animate({
             left:600
        })

参数：延迟的时间（毫秒）
2.stop：停止

 $("#box").animate({
            left:600
        },1000).animate({
            top:500
        },1000)
    })

    $("#btn").click(function(){
        $("#box").stop(true,false);
    })

参数1：表示动画队列的操作
true:删除队列
false:没有删除队列
参数2：表示当前动画的操作
true:当前动画立即运动到终点
false:当前动画停止了
动画队列：如何一个元素存在多个动画效果，那么会产生一个队列，
按照动画开启的顺序，依次执行，执行完前一个，后一个才能开始执
行，如果前一个正在执行，那么后面所有动画都在等待，所谓的停止
动画，其实要分两个动作进行，一个当前动画，一个是等待动画，真
正想要的停止，就是停在当前位置不走了：既要清除当前动画，又要
删除等待动画.
3. finish：直接运动到最后一个动画的终点

  $("#btn").click(function(){
      $("#box").finish();
    })

提示：jquery的dom元素的方法可以连缀执行（特点）