<!DOCTYPE html>
<html lang="en" class="loading">
<head>
    <meta charset="UTF-8">
    <title>animate方法</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
          /*  show()方法和hide()方法会同时修改元素的多个样式属性，即高度、宽度和不透明度:
              fadcOut()方法和fadeln()方法只会修改元素的不透明度:
              slideDown()方法和slideUp()方法只会改变元素的高度.
              animate方法的标准格式:要使用此方式的前提是被操作的元素必须有position属性，否则没效果
              animate(params, speed,callback);
           */
           $(".panel").click(function(){
               //点击元素后在1秒内向右移动300px的同时元素高度增加到200px，不刷新页面的情况下再次点击元素不会再移动
               $(this).animate({left:"300px",height:"200px"},1000);
               //不刷新页面的前提下，再次点击元素时在上一次位置的基础上向右移动300px，不是向左
               //$(this).animate({left:"+=300px"},1000);
           });
        });
    </script>
    </head>
<body>
    <div class="panel" style="width: 100px; height: 100px;margin: 100px; background: #647787; position: relative;" ></div>
</body>
</html>

animate方法使用总结的更多相关文章

  1. 使用jQuery的animate方法制作滑动菜单

    周末看Ziv小威的博客<制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿>,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html.是 ...

  2. 修改内联CSS（点击按钮连续改变文字大小、位置，.animate()方法）

    $(document).ready(function(){            $('#swticher-large').click(function(){                var $ ...

  3. jQuery 效果 - animate() 方法

    http://www.w3school.com.cn/jquery/effect_animate.asp 实例 改变 "div" 元素的高度: $(".btn1" ...

  4. jQuery的animate方法在IE7下出现小问题

    接上,今天接着修改网站的bug,还是网页的这几张图片,还是滑动效果,但在IE7下不但几张图片只显示一张,更别提滑动效果了,根本滑不了啊: 然后打开IE的F12工具,先看样式,再看滑动效果:本来应该显示 ...

  5. jQuery的animate方法在IE8下出现小问题

    今天修改网站的bug,把网页显示的几张图片给做成左右滑动的动画效果: 由于本身有一个demo可供参考,然后在此基础上进行修改,所以很快就搞定了,然后在chrome,firefox,IE9下分别进行测试 ...

  6. JQuery简单动画效果的发生顺序和animate方法

    (1)在同一组元素上的效果 当在一个.animate()方法中以多个属性的方式应用时,是同时发生的. 当以方法连缀的形式应用时,是按顺序发生的(排队效果)---除非queue选项值为false. (2 ...

  7. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  8. jQuery 效果 - 动画 animate() 方法

    我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...

  9. jQuery animate方法开发极客标签Logo动画融合效果

    在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画融合效果 相关代码录播:jQuery animate方法开发极客标 ...

随机推荐

  1. imooc-free

    前端性能优化-通用的缓存SDK 依赖项 1.在hosts文件中配置  127.0.0.1 http://cc.imooc.com   就可以直接访问 http://cc.imooc.com:3000 ...

  2. 2017-2018-2 20165234 实验二 《Java面向对象程序设计》实验报告

    一.实验报告封面 课程:Java程序设计  班级:1652班  姓名:刘津甫  学号:20165234 指导教师:娄嘉鹏  实验日期:2018年4月13日 实验时间:15:35 - 17:15  实验 ...

  3. ubuntu14.04配置face_recognition环境

    Github项目地址:https://github.com/MiChongGET/face_collection 环境搭建 1.  环境 ubuntu14.04 LTS python2.7 pip   ...

  4. centos系统下安装python3以及pip3

    首先查看一下系统当前的python版本 python -V 1.安装必要工具 yum-utils 它的功能是管理repository及扩展包的工具yum install yum-utils -y 2. ...

  5. SpringSecurity实现用户名密码登录（Token）

    传统的应用是将Session放在应用服务器上,而将生成的JSESSIONID放在用户浏览器的Cookie中,而这种模式在前后端分离中就会出现以下问题 1,开发繁琐. 2,安全性和客户体验差 3,有些前 ...

  6. 看完此文还不懂NB-IoT，你就过来掐死我吧...

    看完此文还不懂NB-IoT,你就过来掐死我吧....... 1 1G-2G-3G-4G-5G 不解释,看图,看看NB-IoT在哪里? 2 NB-IoT标准化历程 3GPP NB-IoT的标准化始于20 ...

  7. MySQL DROP TABLE操作以及 DROP 大表时的注意事项【转】

    删表 DROP TABLE Syntax DROP [TEMPORARY] TABLE [IF EXISTS] tbl_name [, tbl_name] ... [RESTRICT | CASCAD ...

  8. C++学习day1

    1. 有符号整数 对于有符号整数,最高位为0表示正数,为1表示负数 负数的绝对值为除最高位外,其余取反再加1 int 字节数:4,取值范围:-232~232-1 最大值为232-1 最小值即为 000 ...

  9. window10 matlabR2015b 安装minGw

    第一步:下载TDM-GCC(注意看清是32位还是64位),TDM-GCC的安装路径不要包括空格: http://tdm-gcc.tdragon.net/download 第二步:点击“我的电脑”右键“ ...

  10. OPENSSL编程 第二十章 椭圆曲线

    20.1  ECC介绍 椭圆曲线算法可以看作是定义在特殊集合下数的运算,满足一定的规则.椭圆曲线在如下两个域中定义:Fp域和F2m域. Fp域,素数域,p为素数: F2m域:特征为2的有限域,称之为二 ...