jquery中动画（animal）只运行一次的问题！

最新推荐文章于 2022-08-30 19:40:01 发布
最新推荐文章于 2022-08-30 19:40:01 发布
阅读量4k 收藏 1
点赞数 1
文章标签： jquery 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wbcnb/article/details/76437669
版权
在jQuery中遇到动画(animal)只执行一次的问题，原因为第二次执行时动画效果失效。该问题出现在尝试使组件向左滑动并随后复原的场景。问题在于复原后，再次执行动画时不工作。解决办法是避免使用固定right值，而是利用相对值来实现动画效果，确保动画可以正常重复执行。
摘要由CSDN通过智能技术生成

jquery中动画（animal）只运行一次的问题！

本人想要编写的功能是：组件向左滑动一段距离之后，滑动结束之后，将组件复原（回到原来位置）！

具体代码：

    $("#content").animate({right:'0'},3000,function() {
   
                        var first=$("#content li:first-child").clone(true);
                        $("#content li:first-child").remove();
                        $("#content").append(first);
                        $("#content"<
最低0.47元/天 解锁文章
paulPig
关注
2022年前端面试题整理，持续更新中
m0_54849873的博客
07-27 1138
rem是一个相对单位，rem的是相对于html元素的字体大小，没有继承性em是一个相对单位，是相对于父元素字体大小有继承性px是一个“绝对单位”，就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。因为Vue的组件可能会在很多地方使用，会产生多个实例，如果返回的是对象的，这些组件之间的数据是同一份（引用关系），那么修改其中一个组件的数据，另外一个组件的数据都会被修改到。...
jQuery中animate动画第二次点击事件没反应
10-24
主要介绍了jQuery中animate动画第二次点击事件没反应的解决方法，非常的实用，有需要的小伙伴可以参考下
动画执行完后再次执行
weixin_34348805的博客
08-03 434
正常情况下css3动画执行结束以后就停止了，如果要再次执行可以再animationend事件里移除动画然后重新添加动画。 document.getElementById("someElementID").addEventListener('animationend',function(){ this.classList.remove('someAnimationClass'); ...
animation 只触发一次的解决办法
热门推荐
guanzhangl的博客
09-14 1万+
animation只触发一次解决办法。通过js控制让animation等于空，删除animation样式。document.getElementById("div").style.animation = "";document.getElementById("div").style.animation = "mymove 2s";注意点：1.js是一条语句执行一次 清空animation一定要在动...
JQuery笔记(二)jq常用方法animate()
weixin_30889885的博客
12-01 63
在jq中，比较方便的是相对于js，jq封装了很多方法，很方便使用，下面我举几个常用的方法 animate()方法 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Do...
jQuery动画
FH_94的博客
09-21 270
jQuery动画 $(function(){ $('#btn1').click(function(){ $('img').hide(2000,function(){ var size =$('img:hidden').length; alert("动画隐藏了"+size+"个"); }) }); $('#btn2').click(function(){ $
HTML+CSS+JS 保护动物网站
05-31
4. 动画效果：根据标签“动画”，这个网站很可能利用了 CSS3 或 JavaScript 库（如 jQuery）来创建动态效果，增强用户体验。这些动画可能包括滑动、淡入淡出、旋转等，为网站增添活力和吸引力，使得动物的展示更加...
史上最全最新前端面试题（不定期更新，有问题欢迎评论区对线）
lb_nizhanban的博客
06-13 2304
一阶段面试题： CSS浮动怎么理解的 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，也就是脱离文档流，所以文档的普通流中的块框表现得就像浮动框不存在一样。一般使用float来实现浮动，联系=》清除浮动的相关方法。27题 绝对定位相对定位怎么理解 absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据根元素
jQuery animate动画详解
林中明月间丶
08-21 7803
// animate():第一个参数：{width:200} 运动的值和属性 // 第二个-时间：默认400ms{},1000 //第三个-运动形式-两种：1.默认：swing(慢快慢) 2.linear(匀速) //第四个-回调函数 //$(this).animate({width:"300px",height:"300px"},2000,'linear',function(){alert(12...
jQuery04（事件&动画）
weixin_67465673的博客
03-22 1494
jQuery第四课(事件&动画） 笔记: 一、事件 1.加载DOM两种方式（区别）. ①、js 执行方式:不可以写多个，多个就被覆盖 ②、jQuery 执行方式：可以写多个，并且都会被执行 ---注意：它们的执行顺序是跟版本有关的 ①、高级版本3.x以后的版本js快 window.onload=function(){ console.info("js方式1"); } window.onload=function(...
CSS中animation动画-详解
qq_48109675的博客
08-30 4万+
1、animation-name ：xx （设置关键帧的名称为xx） 2、animation-duration：5s （动画持续时间为5s） 3、animation-timing-function： linear （动画时间曲线 也叫做运行速度为匀速） 取值： linear 匀速、 ​ ease （默认）低速开始—>加速—>结束前减速 、 ease-in 以低速开始、ease-out 以低速结束、ease-in-out 以低速开始和结束。 cubic-bezier(n,n,n,n)
关于Jquery动画滞后问题(转)
10-08 112
jQuery中slideUp 、slideDown、animate等动画运用时，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，其表现不雅。非常影响使用体验。 之前在开发中也遇到过这样的问题。没有记录的习惯，导致时隔很久忘了这个常见bug的解决办法。现在找到了必须记录下来。 bug效果图： 原始代码： $(function...
jquery animate动画实现循环执行
比音的博客
03-24 1万+
设置好动画animate的每一步后，可以用用setTimeout实现，setTimeout( ) 方法用于在指定的毫秒数后调用函数或计算表达式。 $(document).ready(ab () ); function ab() { $(".ggys1").animate({opacity:0},2000,
jQuery动画效果
sult812的博客
05-05 98
jQuery动画效果 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Adobe Dreamweaver JavaScript 作者：学生的姓名 撰写时间：2020年4月20日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
jq animate动画
weixin_43294560的博客
12-12 673
animate $('选择器').animate({json类型到终点的几何位置/几何大小},毫秒数) 多个变化一起执行 $(".div1").animate({"width":100,'top':400,'left':400},4000); 链式调用，执行完一个变化后再执行另一个变化 $(".div1").animate({'width':100},2000)...
jquery hover事件只触发一次动画
水中熊的博客
12-06 9302
最近工作时遇到个关于动画的问题，如下： $("div").hover( function() { $(this).animate({"margin-top":"100px"},1000); }, function() { $(this).animate({"margin-top":"200px"},1000); }); 看代码就是一个简单
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值