关于设置jQuery的animate动画没有显示效果的问题

最新推荐文章于 2023-10-29 16:39:43 发布
最新推荐文章于 2023-10-29 16:39:43 发布
阅读量5.2k 收藏 2
点赞数 3
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yumon321/article/details/73250973
版权

今天测试代码，图片设置的animate只有始终没有显示效果，但是奇怪的是设置为slideTaggle、或者fade就有动画效果。


网上找了一下，原来是position的问题，jQuery的动画也可以说切换的是css样式，如果图片所在div你没有设置position为absolute，那么不会有关于位置移动的特效。


但是slideTaggle为什么会有效果呢？我也不清楚，找到原因了再回来补充。


小白记录

他知道
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于jquery的动画效果代码
12-12
jquery动画 有意思的地方见效果图： 思想： 将图片设置分割div的背景图片，控制div的属性，可以现实有趣的滤镜效果，本例中展示了一种，感兴趣的朋友可以尝试其他滤镜的实现。 本例其余动画部分，主要是利用jquery中提供animate和delay实现。 animate：这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性。 delay：设置一个延时来推迟执行队列中之后的项目。 实例效果： jquery 动画 *{margin: 0px;padding: 0px;} #test{width:300px; height: 300px; p
jQuery中常用动画效果函数知识点整理
12-12
jQuery的效果函数列表： animate():对被选元素应用“自定义”的动画。 clearQueue()：对被选元素移除所有排队的函数（仍未运行的）。 delay():对被选元素的所有排队函数（仍未运行）设置延迟。 dequeue()：运行被选元素的下一个排队函数。 fadeln()：逐渐改变被选元素的不透明度，从隐藏到可见。 fadeOut()：逐渐改变被元素的不透明度，从可见到隐藏。 fadeTo():把被选元素逐渐改变至给定的不透明度。 hide():隐藏被选的元素。 queue():显示被选元素的排队函数。 show():显示被选的元素。 slideDown():通过调整高度来滑动
在网页中用JS设置了animation没有效果(可能的原因及解决方案)
wockky的博客
04-22 6224
不得不说有时候写网页做效果，一个一个分开效果都出得来 , 合在一起就是死活出不来效果 , 下面分享一下我刚刚找到JS设置animation出不来效果的原因.上面就是我总结出来的一些可能会出错的地方,以及一些解决的办法,因为我也是刚开始学习的萌新,所以肯定还有很多没有注意到的地方,欢迎大家补充、提问。这句的意思是在窗体加载完毕以后运行 , 如果把元素获取的代码写到这块以外的地方就会出现元素为null的显示就会找不到操作对象。2.用JS设置属性的时候写法不对 , 开始的时候我用。这两种写法都是错误的。
我的animate 动画失效了
b君笔记
10-09 3152
目录我的动画没生效原因prefers-reduced-motionanimate.css reduce部分代码js监测开启动画减弱的作用各个系统开启了动画减弱功能参考文章原文链接 我的动画没生效 Animate.css 是我们常用的css动画，前几天打包完测试突然发现它失效了。 一开始还以为是包打出了问题了，还调试了不少时间，把自己整懵逼了。当我回到它官网Animate.css想再看看是哪里除了问题时， 我发现了一句话。 Hey! It seems that you have animations dis
动画库不生效的原因
kwon_sdqb的博客
10-29 120
使用WOW、AOS都发现这个问题，当我html中vue挂载完毕后，原本的正常的动画效果消失了。但是class绑定的animate.css效果保留。思索原因，应该是mounted挂载结束晚于script执行。解决办法:延时器足以。我辅以节点存在判别，毕竟延时器这个东西还是受网络速度影响，不算最优解。经过试验，也可以节点在script执行时，mounted未挂载，不存在。ps：记录一下，主要是动画库很香哈哈哈哈。
使用Animate.css时动画不生效的问题
Robin的博客
03-07 3438
在使用Animate.css的时候发现动画并不生效，原因就在于(可能)操作系统上禁用了动画 win10系统 按win + q(win10)或win + r，搜索%windir%\system32\SystemPropertiesPerformance.exe,开启这个性能选项窗口后勾选 窗口内的动画控件和元素 ...
关于用jQuery的animate方法实现的动画在IE中失效的原因以及解决方法
weixin_34101229的博客
04-17 225
　　这几天在学jQuery，本身还只是一个新手，写了一个简单的动画——圆形头像的缩放。本身是用Firefox进行调试的，一切进行的很顺利，缩放可以按照预期执行，结果拿到IE上去之后，发现缩放动画失效了。后来百度了一些东西都没有找到关键所在，最后Google一下，找到了很多实用的解决方法，现在在这里总结一下，希望对有同样困惑的同学能够有所帮助。 可能的原因： （1）jQuery版本过于陈旧...
ajax animate,在AJAX加载后，JQuery UI animate（）不起作用（）
weixin_35912164的博客
08-05 170
我有一个按钮在使用JQuery UI的animate()悬停和悬停时改变颜色。点击时，该按钮会通过AJAX加载页面。事情是，一旦我点击那个按钮，animate()似乎不工作，它只是冻结在一种颜色。在AJAX加载后，JQuery UI animate()不起作用()Jquerytest$('document').ready(function() {var menubutton_animation =...
jQquery :animated 给没有动画效果的元素添加动画
cyanciel的专栏
01-05 1127
:animated div { width:300px; height:300px; background-color: lightgreen; } Run $('#run').click(function(){ $("div:not(:animated)").animate({ width: "+=30" }, 5000); }
调用jQuery的animate()方法无法移动的问题
qq_23350817的博客
11-14 1394
源代码： <input type="button" value="Button-1" /> <button id="btn">Button-2</button> 默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。 如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 abso..
jQuery实现连续动画效果实例分析
11-26
这里介绍jQuery实现一连串的连续动画效果，将这些动画运用先设置好，然后在jQuery的作用下完成一个接一个的动画，这在网页游戏编写中是个基础但重要的动画生成技巧，对于前台设计来说也是有必要掌握的。 运行效果...
jQuery中常用动画效果函数(日常整理)
11-23
jquery中动画效果非常多，下面小编给大家分享一下jquery中的动画函数。 jQuery的效果函数列表： 　animate():对被选元素应用“自定义”的动画。 　clearQueue()：对被选元素移除所有排队的函数（仍未运行的）。 　...
jQuery实现基本动画效果的方法详解
12-01
本文实例讲述了jQuery实现基本动画效果的方法。分享给大家供大家参考，具体如下： animate()方法用于创建自定义动画 语法： $(selector).animate({params},speed,callback); params:必须 定义形成动画的CSS属性 ...
infrared-remote-candroid studiodemo
05-05
android studio下载
【新质生产力】新质生产力赋能智能制造数字化解决方案.pptx
05-05
【新质生产力】新质生产力赋能智能制造数字化解决方案.pptx
基于matlab实现的用于应用布格重力异常数据反演地下异常密度体.rar
05-05
基于matlab实现的用于应用布格重力异常数据反演地下异常密度体.rar
node-v8.10.0-linux-x64.tar.xz
最新发布
05-05
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于Yolov5目标检测和deepsort目标跟踪无人机跟踪.zip
05-05
无人机最强算法源码，易于部署和学习交流使用
jquery自定义动画animate()
03-16
jQuery的animate()方法是用来实现动画效果的。它可以让元素在一定时间内从一个状态过渡到另一个状态，比如改变元素的位置、大小、透明度等。animate()方法可以自定义动画效果，可以设置动画的持续时间、缓动函数、回...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值