下面为一组图片（四张）展示

1

2

3

4

页面代码如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <style type="text/css">

         .box{border:1px solid #aaccff;margin-top:10px;padding:10px;line-height:25px;}

         .welcome{font-size:50px;color:Red;font-weight:bold;margin-top:220px;text-align:center;}

         #coverbox{position:absolute;left:0px;top:100px;background-color:#e5e5e5;height:500px;width:100%;}

         #coverbox #leftbox,#coverbox #rightbox{width:49%;height:500px;background-color:#ee00aa;}

         #coverbox #leftbox{border-right:1px solid red;float:left;}

         #coverbox #rightbox{border-left:1px solid red;float:right;}

     </style>

     <script type="text/javascript" src="Scripts/jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(function ()

         {

             $(document).click(function ()

             {

                 $("#leftbox,#rightbox").animate({ width: -1 + "px" }, 4000, function ()

                 {

                     $("#coverbox").fadeOut(3000);

                 });

             });

         });

     </script>

 </head>

 <body style="font-size:12px;">

     <div class="box">

         <ol>

             <li>实现拉幕效果，点击灰色区域时，左右两部分分别向两侧移动</li>

             <li>拉幕效果完成之后，逐渐显示：欢迎进入Jquery动画世界</li>

         </ol>

     </div>

     <div class="welcome">欢迎进入Jquery动画世界</div>

     <div id="coverbox">

         <div id="leftbox"></div>

         <div id="rightbox"></div>

     </div>

 </body>

 </html>

好了，一个简单的动画制作完成了

jQuery如何制作动画的更多相关文章

  1. 前端制作动画的几种方式（css3，js）

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

  2. jquery的animate({})动画整理

    在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...

  3. 使用 jQuery & CSS3 制作美丽的照片画廊

    在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...

  4. CSS3制作动画的三个属性

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...

  5. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  6. jQuery & CSS 制作金属质感的选择按钮

    如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...

  7. 酷！使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  8. requestAnimationFrame制作动画：旋转风车

    在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...

  9. canvas学习之制作动画

    html部分 ...... <body> <canvas id="myCanvas" width="400" height="400 ...

随机推荐

  1. Python内置函数(62)——sum

    英文文档: sum(iterable[, start]) Sums start and the items of an iterable from left to right and returns ...

  2. 前端基本知识（三）：JS的闭包理解（第一个思考题有错误，已修改）

    JS闭包的理解 一.变量的作用域 二.如何从外部读取局部变量 三.什么是闭包 四.深入理解闭包 五.闭包的用途 六.使用闭包注意情况 七.JavaScript的垃圾回收机制 八.一些思考题 一.变量作 ...

  3. 『最长等差数列 线性DP』

    最长等差数列(51nod 1055) Description N个不同的正整数,找出由这些数组成的最长的等差数列. 例如:1 3 5 6 8 9 10 12 13 14 等差子数列包括(仅包括两项的不 ...

  4. asp.net core系列 39 Web 应用Razor 介绍与详细示例

    一. Razor介绍 在使用ASP.NET Core Web开发时, ASP.NET Core MVC 提供了一个新特性Razor. 这样开发Web包括了MVC框架和Razor框架.对于Razor来说 ...

  5. PyQt：左侧选项卡

    写在前面 正在用pyqt写我们比赛项目的客户端,针对左侧选项卡,写了一个简单的demo.记录一下. 环境 Python3.5.2 PyQt5 陈述 用的结构是左边一个QListWidget + 右边Q ...

  6. 【Python3爬虫】拉勾网爬虫

    一.思路分析: 在之前写拉勾网的爬虫的时候,总是得到下面这个结果(真是头疼),当你看到下面这个结果的时候,也就意味着被反爬了,因为一些网站会有相应的反爬虫措施,例如很多网站会检测某一段时间某个IP的访 ...

  7. spring boot 统一异常处理

    需求源自于任何一个业务的编写总会有各种各样的条件判断,需要时时手动抛出异常,又希望让接口返回友好的错误信息. spring boot提供的帮助是自动将异常重定向到路由为/error的控制器 但是我们又 ...

  8. ASP.NET Core使用Jaeger实现分布式追踪

    前言 最近我们公司的部分.NET Core的项目接入了Jaeger,也算是稍微完善了一下.NET团队的技术栈. 至于为什么选择Jaeger而不是Skywalking,这个问题我只能回答,大佬们说了算. ...

  9. GITHup的使用

    一个源码管理工具,由于不擅长敲GIt命令,还不太喜欢用英文版本的软件,所以想办法用中文版的图形工具步骤如下: 下载了GIT64位,安装,下载了TortoiseGit和TortoiseGit中文语言包, ...

  10. win10 git bash 闪退

    使用ghost重装了win10 专业版后.安装git,尝试重装了n个版本的git,右键git bash here 直接闪退,直接进入安装目录打开git-bash.exe依旧闪退, git右键点击Git ...