jQuery自定义动画方法animate()

最新推荐文章于 2022-07-07 14:59:11 发布

前端_小智

最新推荐文章于 2022-07-07 14:59:11 发布

阅读量1.1k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_43445778/article/details/106320719

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

animate()方法执行CSS属性集的自定义动画，该方法会将一个属性在指定或者默认的时间内从一个属性值变化到另一个属性值，由于属性值是逐渐变化的，所以就形成了所谓的动画效果。
用法：

$(selector).animate({styles},speed,easing,callback);

参数说明：
styles:styles用来设置对象属性值的目标值，即需要将属性值变成什么状态或者大小。设置格式一个属性对应一个属性值。
如果同时设置多个属性值，需要用逗号连接。
如果属性值是数字型的，可以不加单位，如{'width':100} 但是如果要加上属性值单位，就要将属性值用引号包起来，如{'width':'200px'}。
speed:speed就是速度、多快的意思，就是对象属性值从当前的状态转换到你设置的另一个状态的变化时间，支持数字类型和字符串两种类型，数字类型可以不用引号，直接写数字，单位是毫秒。字符串是固定值'fast'、'normail'、'slow'，如果不写，默认就是'normal'。

easing:easing是描述这个动画设一个怎样的运行过程，'linear' 就是匀速的意思，即对象属性值从当前值变化到另一个值在固定的时间内是匀速变化的，而默认'swing'这个参数表示曲线形的运动模式，刚开始会慢慢运动，然后加速，最后减速。
callback：callback是一个回调函数表示在动画执行完毕以后去调用的一个函数，用了这个回调函数，我们可以实现让动画往复运行，即在回调函数里面再把对象属性值设置为初始状态，再利用循环定时器，可以完成，下面会给大家附带一个动画代码，就是用这种思想实现的。
自定义简单动画：

<head>
<style>
#wrap{
  position:relative;
  width:100px;
  height:100px;
  border:1px solid #0050D0;
}
</style>
</head>
<div id="panel">click me</div>
<script>
$(function(){
     $("#wrap").click(function(){
          $(this).animate({left:"500px"},3000);
     });
});
</script>

设置一个固定位置，一次性的完成
效果图：
在这里插入图片描述
2.累加、累减动画
将上例jQuery代码改为 (在500px之前加上"+=“或”-="，即表示在当前位置累加或者类减)


$(function(){
     $("#wrap").click(function(){
          $(this).animate({left:"+=500px"},3000);
     });
});

累加动画，点击一次执行位置的累加操作
在这里插入图片描述
3.多重动画
（1）同时执行多个动画
元素向右滑动的同时，高度也在增加。

$(function(){
     $("#wrap").click(function(){
          $(this).animate({left:"500px"，height:"200px"},3000);
     });
});

在这里插入图片描述
（2）按顺序执行多个动画
元素先向右滑动，然后再增加它的高度。

$(function(){
     $("#wrap").click(function(){
          $(this).animate({left:"500px"},3000);
          $(this).animate({height:"200px"},3000);
          //或者改写成 $(this).animate({left:"500px"},3000).animate({height:"200px"},3000);
     });
});

在这里插入图片描述
动画效果的执行具有先后顺序，称为"动画队列"

综合动画
案例;单机div实现右移的同时增加高度，不透明度从50%到100%,然后从上到下移动，同时增加宽度。最后淡出。

$(function(){
     $("#wrap").css("opacity","0.5"); //设置不透明度
     $("#wrap").click(function(){
          $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
                 .animate({top:"200px",width:'200px'},3000),
                 .fadeOut("slow");
     });
});

在这里插入图片描述
5.动画回调函数
上一个例子中，若想在最后一步切换元素的css样式，而不是隐藏元素：

css（'border','5px solid blue'）;

如果只是按照常规的方式，将fadeOut(‘show’)改为css(‘border’,"5px solid blue");
并不能得到预期效果。预期的效果实在佛南规划的最后一步改变元素的样式，而实际的效果是，刚开始执行动画的时候，css()方法就被执行了。
产生问题的主要原因是因为css()方法并不会加入动画队列中，而是立即执行。可以使用回调函数（callback）对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数。

     $("#wrap1").click(function(){
          $(this).animate({left:"400px",heigth:"200px",opacity:"1"},3000)
                 .animate({top:"200px"},3000，function(){
                         $(this).css("border","5px solid blue");
                 })
     });

在这里插入图片描述

前端_小智

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery自定义动画方法animate()

animate()方法执行CSS属性集的自定义动画，该方法会将一个属性在指定或者默认的时间内从一个属性值变化到另一个属性值，由于属性值是逐渐变化的，所以就形成了所谓的动画效果。用法：$(selector).animate({styles},speed,easing,callback);参数说明：styles:styles用来设置对象属性值的目标值，即需要将属性值变成什么状态或者大小。设置格式一个属性对应一个属性值。如果同时设置多个属性值，需要用逗号连接。如果属性值是数字型的，可以不加单位，如{
复制链接

扫一扫