详解jQuery动画

最新推荐文章于 2024-05-07 19:24:40 发布

小张很慌张

最新推荐文章于 2024-05-07 19:24:40 发布

阅读量145

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_44677940/article/details/105033592

版权

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>

2.上拉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>

3.淡出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：回调函数，在动画完成之后执行的内容，可省略。如：

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

4.半透明fadeTo()

代码如下：

<style>
        #box{width: 100px;height: 100px;background: red;}
</style>
<body>
<input type="button" id="btn" value="半透明">
</body>
<script>
 $("#btn").click(function(){
        $("#box").fadeTo(1000,0.2);
    }
</script>

此方法可以将被选元素的不透明度逐渐地改变为指定的值，
可以接受三个参数，分别是：
参数1：动画执行的时间，可省略。
参数2：透明度的数值，介于0-1之间。不可省略。
参数3：回调函数，在动画完成之后执行的内容。

二．自定义动画：
jQuery同时提供了animate()方法，能够使开发者自定义动画。

animate()方法可接受三个参数：
参数1：对象，即为希望进行变化的css属性列表，以及希望变化到的最终值，必选
参数2：:动画运动的时间，可省略
参数3：:回调函数，表示动画结束后要做的事情，可省略

代码如下：

<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>

需要注意的是：animate()方法中参数1中的变量遵循camel命名方式。例如paddingLeft不能写成padding-left.并且只能是css中用数值表示的属性。例如width、top、opacity等
像backgroundColor这样的属性不被animate()方法支持。

以上为jQuery动画详解，如有误，望指正。

小张很慌张

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详解jQuery动画

jQuery的动画主要分为两个大方面：内置动画和自定义动画，本文主要学习个讲解这两个方面以及jQuery的动画的执行顺序。一．内置动画：1.显示hide()/隐藏show()/显示或隐藏toggle()代码如下：2.上拉slideUp()/下拉slideDown()/上拉或下拉slideToggle() 代码如下：3.淡出fadeOut()/淡入fadeI...
复制链接

扫一扫