JQuery UI如何制作颜色动画

在使用Jquery UI进行Web页面制作的时候,我们有时需要添加一些动画特效,比如颜色变化的效果。下面小编教大家如何用Jquery UI制作颜色动画。

操作方法

  • 01

    先打开Sublime Text,然后在编辑器中添加HTML5页面,如下图所示,由于页面中中文,所以编码需要设置成utf-8的格式

  • 02

    接下来需要下载Jquery UI的库文件,并且在HTML中导入Jquery UI的样式库文件,如下图所示

  • 03

    由于颜色动画特效需要JS脚本控制,所以需要导入Jquery的脚本和Jquery ui的脚本,如下图所示。因为Jquery ui是用jquery编写的,所以先导入Jquery文件

  • 04

    然后在body标签中添加一个div和一个按钮。Div标签是我们要操作的颜色块,按钮用来触发动画操作,如下图所示

  • 05

    接下来在页面中添加style标签,并为上面设置的div颜色块来添加样式,如下图所示

  • 06

    然后在script标签中添加我们脚本代码,如下图所示,通过调用animate方法进行动画调用,它可以直接指定颜色块的背景颜色

  • 07

    最后,我们运行页面程序,你会在页面中看到一个颜色块和一个按钮,点击按钮以后,颜色块发生变化了,如下图所示

(0)

相关推荐

  • PPT幻灯片怎么制作填充颜色动画

    制作PPT幻灯片是在大家工作中经常遇到的任务之一,填充颜色动画又是比较实用的动画之一,可以 让一个对象的填充颜色由一种颜色变为另一种颜色.现在小编就和大家分享 PPT幻灯片中填充颜色动画的使用方法. ...

  • UleadGIFAnimator (Ulead GIF Animator 5) 制作简单动画教程

    友立公司出版的动画GIF制作软件,内建的Plugin有许多现成的特效可以立即套用,可将AVI文件转成动画GIF文件,而且还能将动画GIF图片最佳化,如何制作简单的动画。 方法/步骤 网络中下载好这个软 ...

  • SWFText菜鸟也能制作Flash动画

    一款非常棒的 Flash 文本特效动画制作软件,可以制作超过 168 种不同的文本特效和 40 种背景特效,可以完全自定义文字属性,包括字体、大小、颜色等等,使用 SWFText 完全不需要任何的 F ...

  • 怎么使用抠抠视频秀制作GIF动画?

    抠视频秀是一款可以让用户方便的截取任何视频网站上的片段,并把它们转化为GIF动画的软件,然后用户可以把这些动画片段做成您论坛上的动画头像,动画签名档。可以让你亲自制作GIF动画,羡煞他人。 那么怎么样 ...

  • PowerPoint2016中如何制作倒计时动画

    在我们演示PPT的时候,可能需要一个短暂的计时,比如提出一个问题,然后限时让观众来回答.下面小编就教给大家在PowerPoint 2016中制作倒计时动画的一个小方法,超级简单,一点就会. 首先来制作 ...

  • ppt幻灯片怎么制作开场动画?

    ppt中可以制作一个动画,该怎么制作一个开场动画呢?下面我们就来看看详细的教程,很简单. 1.首先启动ppt2010,执行插入-形状命令,选择圆角矩形,按住shift键绘制圆角矩形. 2.调整其大小, ...

  • PowerPoint2016简单制作倒计时动画

    在我们演示PPT的时候,可能需要一个短暂的计时,比如提出一个问题,然后限时让观众来回答.下面小编就教给大家在PowerPoint 2016中制作倒计时动画的一个小方法,超级简单,一点就会. 首先来制作 ...

  • blender蜡笔工具怎么制作2d动画?

    blender想要制作2d动画效果,该怎么制作呢?下面我们就来看看详细的教程. 1.打开blender按数字键盘的1和5切换到“前视图(正交)”. 2.在右边导航中找到“世界环境”,在里面把“视平线” ...

  • Unity怎么使用Animation制作相机动画?

    Unity中想要直走一个相机动画,该怎么制作呢?下面我们就来看看详细的教程. 1.首先我们用一个UI场景做范例.我们希望相机从对准第一个界面,平滑的扭头到第二个界面. 2.从Window->An ...