<!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. php各种主流框架的优缺点

    ThinkPHP ThinkPHP(FCS)是一个轻量级的中型框架,是从Java的Struts结构移植过来的中文PHP开发框架.它使用面向对象的开发结构和MVC模式,并且模拟实现了Struts的标签库 ...

  2. TortoiseGit bonobo gitserver记住帐号密码

    记住帐号密码有两种方式: 针对服务器存储用户名密码 设置方式为在windows用户存储位置创建文件_netrc,没有后缀名.用文本编辑内容,格式为   machine 115.29.141.162 只 ...

  3. 关于RSA、公钥、私钥、加密、签名的那些概念

    前言 作为一名程序员,经常会听到加密解密之类的词.而非对称加密技术,应用的非常广泛.本文不写加密技术的原理,只是希望以一个简单的类比,让大家了解非对称加密中常见词的概念,以及它的作用. 介绍 在RSA ...

  4. codeforces 1007B Pave the Parallelepiped

    codeforces 1007B Pave the Parallelepiped 题意 题解 代码 #include<bits/stdc++.h> using namespace std; ...

  5. 第2次作业——APP的案例分析

    APP的案例分析 网易有道词典APP,使用这个软件有三年之久.唯独最爱的一点就是我每天都能听到不一样的英文歌看到创作歌手的来历,当然偶尔也会有其他国家的歌.起初使用这个软件的目的是用来查单词,每天积累 ...

  6. IM——技术方案

    一. 即时通讯技术方案 1. 第三方SDK: 环信, 融云, 网易云信, 腾讯 中小型公司/初创型: 建议使用第三方. 好处: 快, 符合快速开发的需求, 自己和后台人员不需要做什么操作 缺点: 你的 ...

  7. python第二十三课——dict中的函数

    dic1 = {...} dic2 = {...} dic1.update(dic2) 1.update(dict):dic1调用update传入dic2,如果dic2中的内容在dic1中不存在,那么 ...

  8. 2016-3-19日小结：scrollTop

    <div id="div1" style="padding: 0; position:absolute;width: 200px;height: 200px;< ...

  9. UVa 1412 - Fund Management（状压DP + 预处理）

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  10. gcd？人生赢家！

    题目背景 原创:b2019dy gcd是一个热爱游戏的人 题目描述 gcd最近在玩一个有趣的游戏 我们把这个游戏抽象成一张图,图上有n个点,我们需要寻找总计m件宝物,它们分布在图上,对于每件宝物而言, ...