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

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. 巡风源码阅读与分析---nascan.py

    Nascan是巡风主要是做目标的资产识别(信息收集). nascan.py 文件位于 nascan/nascan.py # coding:utf-8 # author:wolf@YSRC import ...

  2. Java面试题中的Redis大合集，所有你想找的都在这里！

    概述 Redis 是一个开源的,基于内存的结构化数据存储媒介,可以作为数据库.缓存服务或消息服务使用.``` Redis 支持多种数据结构,包括字符串.哈希表.链表.集合.有序集合.位图.Hyperl ...

  3. AutoFac - 将 autofac 应用于MVC多层项目

    一.前言 AutoFac是.NET平台下的一款著名的IoC Container,它可以让我们很轻松的解除项目中服务类的接口与客户类的接口实现类之间的依赖关系,从而降低系统各模块之间耦合程度以提高系统的 ...

  4. FloatingActionButton(悬浮按钮)使用学习<一>

      FloatingActionButton简称FAB.   一. 对于App或某个页面中是否要使用FloatingActionButton必要性:     FAB代表一个App或一个页面中最主要的操 ...

  5. Lucene 03 - 什么是分词器 + 使用IK中文分词器

    目录 1 分词器概述 1.1 分词器简介 1.2 分词器的使用 1.3 中文分词器 1.3.1 中文分词器简介 1.3.2 Lucene提供的中文分词器 1.3.3 第三方中文分词器 2 IK分词器的 ...

  6. 由Nginx的DNS缓存导致的访问404

    现象 访问某个URL出现404,而且全站都是404.通过日志查看Nginx的规则也正确,请求被代理到指定位置. 排查 最近针对这个站点没有修改过Nginx配置也没有站点升级.所以应该是其他原因.首先P ...

  7. 五一之起一台服务器玩玩-centosl系统搭建lamp

    昨天看到有的扫描软件会扫描公网主机开放的端口,我现在就用了ssh远程登录21和22端口那不是很容易被猜想到.so,我决定要改这个端口,同时这个改端口给我打开了防火墙和ip协议和网络安全的大门. 我之前 ...

  8. 一起来看 rxjs

    更新日志 2018-05-26 校正 2016-12-03 第一版翻译 过去你错过的 Reactive Programming 的简介 你好奇于这名为Reactive Programming(反应式编 ...

  9. jumpserver篇--安装（高可用性 mariadb+haproxy）

    1. 需求 为了解决目前登陆方式多种多样,防火墙配置复杂,历史操作无记录,用户权限混乱等等 2. Jumpserver测试环境搭建 2.1. 环境 os:CentOS release 6.8 mini ...

  10. [ Java面试题 ]框架篇二

    1.Hibernate工作原理及为什么要使用Hibernate? 工作原理: 1.读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory 3.打开Session 4.创建事务Tr ...