<!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. #6284. 数列分块入门 8（区间询问等于一个数 cc 的元素，并将这个区间的所有元素改为 c）

    题目链接:https://loj.ac/problem/6284 题目大意:中文题目 具体思路:还是和sqrt那个题的思路相同的,标记每一块的值是不是相同的,注意lazy下标的下放. AC代码: #i ...

  2. DeepLearning.ai-Week1-Convolution+model+-+Step+by+Step

    1 - Import Packages import numpy as np import h5py import math import matplotlib.pyplot as plt %matp ...

  3. SpringCloud概述

    ⒈官网说明 SpringCloud是基于SpringBoot提供了一套微服务解决方案,包括服务注册与发现.配置中心.全链路监控.服务网关.负载均衡.熔断器等组件,除了基于Netflix的开源组件做高度 ...

  4. 【转】python编写规范——中标软件有限公司测试中心

    [转]python编写规范 一.说明 二.内容 1. 代码布局 1.1 缩进 1.2 表达式和语句中的空格 1.3 行的最大长度 1.4 空行... 1.5 编码... 2. 语句... 2.1 标准 ...

  5. linux 用户密码到期导致ftp业务失败

    外网反馈某业务失败,查看log发现FTP连接失败,定位发现提示密码不对,重新修改FTP密码后恢复正常. 但同时定位了下FTP密码被修改的原因,发现是密码过期了,因此查了下资料,查得修改过期时间的方法 ...

  6. LwIP Application Developers Manual6---Application API layers

    1.前言 lwIP提供3种应用编程接口来跟TCP/IP内核通信,如下所示: 低水平的内核/回调或raw API 2个高水平序列API: 1) netconn API 2) socket API(为了兼 ...

  7. ARMV7-M数据手册---Part A ：Application Level Architecture---A1 Introduction

    1.前言 本章主要介绍了ARMV7体系结构及其定义的属性,以及本手册定义的ARMV7M属性. 主要包括: ARMV7体系结构和属性 ARMV7M属性 ARMV7M扩展 2. ARMV7体系结构和属性 ...

  8. Apollo-3.0本地编译

    Apollo-3.0本地编译 用docker编译所用的dev.x86_64.dockerfile文件(具体位置在apollo/docker/build)中有所有的依赖库或包, 还会执行一些shell脚 ...

  9. 我的大学，我的SPR机器人队

    时间过的真快,我这个在协会呆了好多年的老油条今年都毕业了,在石油大学大学七年几乎三分之二的时间就是在协会度过的.实话说在北京这是我最亲切的地方,这里有我喜欢的各种设备,有亲爱的老师和一起奋斗的队友,在 ...

  10. oracle加密传输

    参考文章: http://blog.itpub.net/24052272/viewspace-2129175/ oracle在传输过程中,正常是明文传输的,例如SQL以及执行的结果. 看看做的测试: ...