jQuery中使用animate方法的一个注意点

最新推荐文章于 2022-07-07 14:59:11 发布
最新推荐文章于 2022-07-07 14:59:11 发布
阅读量364 收藏 1
点赞数
分类专栏： 笔记 文章标签： jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40761746/article/details/105978478
版权

  jQuery中，animate的定义是animate(params,[speed],[easing],[fn])，参数的含义如下：

  • params:一组包含作为动画属性和终值的样式属性和及其值的集合
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:要使用的过渡效果的名称(时间曲线)(需要插件支持).默认jQuery提供"linear" 和 “swing”.
  • fn:在动画完成时执行的函数，每个元素执行一次。

  其它的我们通过参数含义可以很清楚的得知，这里要说的其实就一个。
  不知道你有没有注意到：fn:在动画完成时执行的函数，每个元素执行一次中的每个元素执行一次。也就是说如果你在执行动画的时候是绑定了多个元素的，那么回调函数就会执行几次，如果没有注意这一点，可能会导致出现意料之外的Bug。
  下面我们举一个例子：
  要求是，有 8 个球并列排在一起，先让它们的 margin-left 变为 30px，然后向下移动 50px

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>animation</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <style type="text/css">
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery中animate的几种用法与注意事项
10-20
jQuery中的`animate()`方法是用于创建平滑的动画效果的核心函数。它允许开发者自定义CSS样式的变化，并在指定的时间内逐步应用这些变化。在本文中，我们将深入探讨`animate()`的多种用法以及一些需要注意的事项。 #...
jQuery 效果 - animate() 方法
Dora的专栏
06-17 176
语法 <body> <div style="width: 10px;height: 300px;border: 1px solid;position: relative;"></div> <input type="button" value="animate" /> <script> $(function(){ ...
animate方法的使用(转)
zwt2001267的专栏
01-25 819
animate(params[,duration[,easing[,callback]]]) 用于创建自定义动画的函数。 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。 注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属...
玩转Jquery中的动画效果(animate方法)
weixin_39037804的博客
09-22 2709
jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法： $(selector).animate({params},speed,callba...
jquery animate()方法 动画详解（超简单易懂）
m0_62360527的博客
05-19 9990
jquery animate 动画详解（超简单易懂） animate（）方法是jquery里的动画效果，通过修改css相关属性，在规定时间内，值是不断变化的从而形成了一种动画的效果。
jQuery中animate()的方法
weixin_44774699的博客
07-07 4636
jQuery中animate()的方法
jquery动画顺序执行_jQuery中animate的几种用法与注意事项
weixin_39848097的博客
12-21 722
一、animate语法结构animate(params,speed,callback)params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2}speed:速度参数[可选]callback：在动画完成时执行的函数[可选]二、自定义简单动画用一个简单例子来说明，实现单击某div在页面上横向飘动的效果。#cube{position:relative;/* 不加这句...
jQuery动画效果animate和scrollTop结合使用实例
12-03
这里我们讨论的是jQuery中的`animate`方法和`scrollTop`属性的结合使用，这是一种实现页面滚动动画效果的有效方式。 `animate`是jQuery提供的一种高级功能，允许开发者平滑地改变一个或多个CSS属性值，从而创建出...
jquery animate 动画效果使用说明
12-08
这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画...
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
10-20
在jQuery库中，`animate()`函数是一个非常强大的工具，它允许开发者创建自定义的平滑动画效果，不仅可以用于改变元素的位置，还可以调整其尺寸、颜色等CSS属性。这个方法提供了高度的灵活性，使得网页交互更加生动...
jQuery中animate()方法用法实例
10-25
主要介绍了jQuery中animate()方法用法,以实例形式分析了animate()方法的功能、定义及具体使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
jquery使用animate方法实现控制元素移动
10-24
主要介绍了jquery使用animate方法实现控制元素移动,涉及jQuery中animate方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JQuery Animate()
weixin_44540993的博客
07-07 557
JQuery Animate() -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：vs· jQuery基础 作者： xqll 撰写时间：2019/7/6 -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 下面，我来演示一下 JQuery效果 animate()方法 首先是介绍一下它的定义和用法 animate() 方法执行...
jQuery动画方法animate()
晶谛-giserDev
08-30 845
在jQuery中，提供了专门用于实现动画效果的animate()方法，原型如下： animate: function( prop, speed, easing, callback ) 四个参数的含义如下 prop 必须的，代表动画中元素的最终属性值 speed 动画执行时间 easing 动画执行效果 callback 回调函数 例：移动盒子 $("div").eq(0).animate({left:800}, 8000); 例：停止动画 /** * 停止动画 * clearQueue 是
jQuery animate()方法详解、实例、扩展（详细版）
热门推荐
xuxuechao6的博客
03-14 1万+
jQuery animate()方法详解、实例、扩展（详细版） 　　一、语法 　　先看看官方文档怎么写的。 语法 1 　　$(selector).animate(styles,speed,easing,callback) 参数 描述 styles 　　必需。规定产生动画效果的 CSS 样式和值。 　　可能的 CSS 样式值（提供实例
jquery的animate多次执行后动画速度变慢
front_end_fan
12-28 3115
本质 多次执行 jQuery 动画, 并使用 stop 暂停, 并不是动画变慢, 而是调用 stop 时没有清空动画队列, 导致多个 timeout 来回更新样式, 忽大忽小, 从而看起来动画变慢了..stop( [clearQueue ] [, jumpToEnd ] )stop 默认不会清空队列, 并且跳转到动画结束位置, 两个可选参数默认值都为 false.改成：.stop(true, tr
jQuery中动画函数animate的用法详解
FreeSpider
05-25 1万+
定义和用法 animate()方法执行CSS属性集的自定义动画，该方法会将一个属性在指定或者默认的时间内从一个属性值变化到另一个属性值，由于属性值是逐渐变化的，所以就形成了所谓的动画效果。 方法参数 $(selector).animate(styles,speed,easing,callback) styles： styles用来设置对象属性值的目标值，即需要将属性值变成什么状...
jQuery 动画效果
苦涩
05-06 154
jQuery动画jQuery中文开发文档显示和隐藏参数说明滑动效果 jQuery中文开发文档 显示和隐藏 控制元素的显示和隐藏是最基本的动画技术 show()：显示被选的元素 语法：$(selector).show([speed], [easing], [fn] ) hide()：隐藏被选中的元素 语法：$(selector).hide([speed], [easing], [fn...
jquery隐藏一个div的多种方法
最新发布
05-23
以下是几种使用 jQuery 隐藏一个 div 的方法： 1. 使用 hide() 方法： ```javascript $("#myDiv").hide(); ``` 2. 使用 css() 方法： ```javascript $("#myDiv").css("display", "none"); ``` 3. 使用 animate() 方法： ```javascript $("#myDiv").animate({opacity: 0}, "slow"); ``` 4. 使用 fadeOut() 方法： ```javascript $("#myDiv").fadeOut("slow"); ``` 5. 使用 slideUp() 方法： ```javascript $("#myDiv").slideUp("slow"); ``` 注意，以上方法都是用来隐藏 div 的，如果需要显示 div，可以使用相应的 show()、css()、fadeIn()、slideDown() 方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值