<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>自定义动画</title>

        <script src="js/jquery.js"></script>

        <style>

        .me1{

            position: absolute;

            left: %;

            top: %;

            margin-left: -150px;

            margin-top: -;

            width: 400px;

            height: 100px;

            background-color: orange;

            overflow: auto;

            padding: 10px;

            border: 30px solid lightblue;

        }

        .me2{

            position: absolute;

            left: %;

            top: %;

            margin-left: -200px;

            margin-top: -;

            width: 400px;

            height: 100px;

            background-color: blue;

            overflow: auto;

            padding: 10px;

            border: 30px solid orange;

        }

        </style>

        <script type="text/javascript">

            //页面加载完成简写形式

            $(function(){

                //animate 第一参数 目标值 第二个参数持续时间

            $(".me1").animate({left:"60%",top:"80%",width:"5%",height:"5%",borderWidth:"1px"},

                              {queue:true, duration: } //queue使用队列动画

                              )

            $(".me1").animate({left:"20%",top:"50%",width:"20%",height:"20%",borderWidth:"30px"},

                              {queue:true, duration: } //queue使用队列动画

                              )

            })

        </script>

    </head>

    <body>

        <div class="me1"></div>

        <div class="me2"></div>

    </body>

</html>

jQuery学习-自定义动画的更多相关文章

  1. 11.jQuery之自定义动画

    注意:animate里面是一个对象,他有几个参数,详情可以参考官网 <style> div { position: absolute; width: 200px; height: 200p ...

  2. 深入学习jQuery自定义动画

    × 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...

  3. Day048--jQuery自定义动画和DOM操作

    内容回顾 BOM location.reload() 全局刷新页面 location.href location.hash location.pathname location.hostname lo ...

  4. python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

  5. jquery学习笔记(四)：动画

    内容来自[汇智网]jquery学习课程 4.1 显示和隐藏 在jQuery中使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: hide()的语法形式:$(selector).h ...

  6. jQuery学习之路（4）- 动画

    ▓▓▓▓▓▓ 大致介绍 通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验 ▓▓▓▓▓▓ jQuery中的动画 ▓▓▓▓▓▓ show()和hide()方法 ...

  7. Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析

    这是关于RecyclerView的第二篇,说的是如何自定义Item动画,但是请注意,本文不包含动画的具体实现方法,只是告诉大家如何去自定义动画,如何去参考源代码. 我们知道,RecyclerView默 ...

  8. jQuery学习笔记（四）jQuery中的动画

    目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...

  9. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

随机推荐

  1. MACOS root密码忘了怎么办?

    MAC中ROOT用户很少用到,有时又手贱,给设了密码,过一阵忘了密码,很尴尬

  2. 【gp数据库】查询系统表看模式下所有表的分布键信息

    Greenplum是关系型的分布式数据库,需要存储的数据库在进入数据库时,将先进行数据分布的处理工作,讲一个表的数据平均分不到每个节点上,并为每个表指定一个分发列(distribute Column) ...

  3. Python学习---django-debug-tools安装

    [官网]http://django-debug-toolbar.readthedocs.io/en/1.2/installation.html [更多安装参考]http://blog.csdn.net ...

  4. Linux bzip2命令详解

    Linux bzip/bunzip2命令是.bz2文件的解压缩程序. bunzip2可解压缩.bz2格式的压缩文件.bunzip2实际上是bzip2的符号连接,执行bunzip2与bzip2 -d的效 ...

  5. PHP设计模式系列 - 工厂模式

    工厂模式 提供获取某个对象实例的一个接口,同时使调用代码避免确定实例化基类的步骤. 工厂模式 实际上就是建立一个统一的类实例化的函数接口.统一调用,统一控制. 工厂模式是php项目开发中,最常用的设计 ...

  6. mysql大数据量使用limit分页，随着页码的增大，查询效率越低下

    1.   直接用limit start, count分页语句, 也是我程序中用的方法: select * from product limit start, count当起始页较小时,查询没有性能问题 ...

  7. Redis基本数据类型命令汇总

    前言   前阶段写Redis客户端作为学习和了解Redis Protocol,基本上把Strintg,List,Hash,Set,SortedSet五种基础类型的命令都写完了,本篇进行总结,也相当于复 ...

  8. Docker实战(一)之使用Docker镜像

    镜像是Docker三大核心概念中最为重要的,自Docker诞生之日起“镜像”就是相关社区最为热门的关键字. Docker运行容器前需要本地存在对应的镜像,如果镜像没有保存至本地,Docker会尝试先从 ...

  9. TensorFlow安装-Windows

    参考:https://blog.csdn.net/dou3516/article/details/77836459 一.安装环境 TensorFlow即可以支持CPU,也可以支持CPU+GPU.前者的 ...

  10. 新浪微博资深大牛全方位剖析 iOS 高级面试

    第1章 课程简介本章对这门课程所讲述内容进行概要介绍,其中包括课程目标.适合人群,课程特色.课程收获.课程安排等.整个课程学习完结后,有机会获得电话模拟面试及内推. 1-1 课前必读(不看会错过一个亿 ...