Jquery如何使用animation动画效果改变背景色的代码

时间：2021-05-26

一、问题引入

jquery的animate动画虽然强大，但是无法使用其进行背景色(background-color)的动画效果变化，因为animate动画效果只能动态改变数值型的参数，例如：top，left，width，height...等等

好像网上也有说要装一个 "jquery.ui" 的插件之类的。但是博主我实在不想引入过多的插件， 且恰好本人掌握的CSS比较好一点点， 所以就想了下面这么个法子。

但好在CSS它自带的animation动画效果更加强大，它可以为我们提供背景色的动态变化。所以我们可以利用Js+CSS的方法达成我们预期效果。

二、demo展示

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery无法通过animate动画改变背景色</title> <style type="text/css"> #btn{ display: block; width:100px; margin:50px auto 0px; font:bold 30px/50px 'Microsoft Yahei'; background-color: lightblue; } .box{ margin:100px auto 0px; background-color: green; width:400px; height:400px; } @keyframes color_turn{ from{ background-color: green; } to{ background-color: blue; } } .change_color{ animation: color_turn 500ms ease 2 alternate; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var obtn = $('#btn'); var obox = $('.box'); obtn.click(function(){ obox.addClass('change_color'); var timer = setTimeout(function(){ obox.removeClass('change_color'); },1100); }) }) </script> </head> <body> <input type="button" id="btn" value="变色"> <div class="box"></div> </body></html>

2.1 程序设计思想

  • 首先设计好一个由绿色变为蓝色的动画效果，使用一个类名为"change_color"的选择器来存放。
  • 通过js实现点击按钮一次，为div 标签增加类名为"change_color"的类，增加完后，动画便开始播放。当定时器，经过 1100ms 后会执行移除该类的命令，使得点击按钮可以重复播放背景色变化的动画效果。

2.2 重点与难点(坑)

之所以，要使用定时器来移除"change_color"这个类，是因为如果增加类与移除类两句代码挨得太近 ，会导致bug，即无法实现重复点击按钮，实现反复播放动画。所以为了能够重复播放，且两句执行时间间隔不能太小，所以设置了一个定时器，使得 1100ms 后执行 (定时器的时间还得根据你的动画持续时间而定，保证动画播放完以后，再进行类的移除)

其实还有一种方式，但前提是中间的代码足够长(即机器周期足够长)

obtn.click(function(){ obox.removeClass('change_color'); ... ... ... obox.addClass('change_color');})

每次点击，播放动画前先移除类，经过若干个机器周期( 究竟多少个，代码要多长，我也不清楚 )，再增加该类，便能达到预期效果。

2.3 效果展示

到此这篇关于Jquery如何使用animation动画效果改变背景色的文章就介绍到这了,更多相关Jquery如何使用animation动画效果改变背景色内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章