jquery动画详解

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

  1. 显示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>
  1. 上拉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>
  1. 淡出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元素的方法可以连缀执行(特点)

发布了3 篇原创文章 · 获赞 1 · 访问量 122
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览