济宁微信小程序商城_Jquery怎么使用animation动画效果改变布景色的

Jquery如何使用animation动画效果改变背景色的代码       这篇文章主要介绍了Jquery如何使用animation动画效果改变背景色,需要的朋友可以参考下

 一、问题引入

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;
 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(){
 由于需要动画能够重复播放,所以我们需要反复删除和添加 change_color 这个类,
 按照正常逻辑,先删除该类,再添加应当会正常播放动画,但经多次试验由于两句执行的时间间隔太小,
 导致出现bug,无法达到预期效果,所以我们要想办法让这两句执行的时间间隔长一点
 obox.removeClass('change_color');
 obox.addClass('change_color');
 obox.addClass('change_color');
 /*----通过定时器延迟 1100ms 后执行移除类的指令,这样就能解决问题了-----*/
 var timer = setTimeout(function(){
 obox.removeClass('change_color');
 },1100);
 /script 
 /head 
 body 
 input type="button" id="btn" value="变色" 
 div /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动画效果改变背景色内容请搜索凡科以前的文章或继续浏览下面的

相关阅读