动画（Dynamic）

JQuery动画必须是在标准文档下使用 否则可能引起动画时抖动或其它不可预知的结果，标准文档格式：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
动画函数
show(speed, callBack)
//speed：动画速度，可能的值有 slow（600毫秒）、fast（200毫秒）、normal（400毫秒）、自定义毫秒
//callBack：回调，可选
//以动画的方式显示事前被隐藏的元素
hide(speed, callBack)
//以动画的方式隐藏事前已经显示的元素
fadeIn(speed, callBack)
//在指定的时间内将该元素的透明度逐步增高
fadeOut(speed, callBack)
//在指定的时间内将该元素的透明度逐步减少（非隐藏）
slideDown(speed, callBack)
//将隐藏的元素以从上往下逐步展开的动画方式显示出来
slideUp(speed, callBack)
//将事前已经显示的对象以从下往上收拢的动画方式隐藏（table无效）
toggle(speed)
//切换元素的可见性
slideToggle(speed)
//如果该对象事前是显示的，则将该对象从下往上收拢直至隐藏，否则将该对象从上往下展开直至完全显示
animate(params, speed, callBack)
//params：匿名对象，用于设置元素的css，使该对象出现params指定的css动画效果
stop(clear, goToEnd)
//clear：指示是否清空还未执行的动画队列
//goToEnd：指示是否直接将正在执行的动画跳转到末状态
//如果参数不存在，会立即停止动画，如果接下来还有动画队列等待执行就继续执行下一个动画
//示例：
$('div').click(function () {
    $(this).animate({ 'left': '300' }, 1000);
});
$('div').click(function () {
    $(this).animate({ 'left': '-=300' }, 1000);
});
动画积累

当用户不停的在一个动画对象上进行操作就会造成动画积累，可以使用is方法来测试该对象是否正处于动画状态，如果没有处于动画状态才为其添加动画，否则不执行任何操作

$('p').mouseover(function () {
    if (!$('p').is(':animated')) {
        $(this).animate({ 'left': '+=200' }, 3000)
    }
});

　　

Javascript - 学习总目录

Javascript - Jquery - 动画的更多相关文章

  1. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...

  2. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

  3. 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效

    1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...

  4. 7款经典炫酷的HTML5/jQuery动画应用示例及源码

    jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富 ...

  5. jQuery动画效果实现

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. JavaScript jQuery 入门回顾 2

    JQuery 滑动 利用jQuery可以在元素上创建滑动效果. slideDown() 向下滑动元素. slideUp() 向上滑动元素. slideToggle() 在 slideDown() 与 ...

  7. jQuery 动画的执行

    jQuery 动画的执行 <%@ page language="java" import="java.util.*" pageEncoding=" ...

  8. jQuery动画使用总结

    jQuery动画我用的比较多的仅仅只有show和hide,但是作为一个被我们大多数人所熟知的框架,相信他的动画功能还是比较多样的,这里做个小总结. 1.jQuery animate(),用于创建自定义 ...

  9. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

随机推荐

  1. xrange与range的区别

    xrange属于类,继承自object. 用法: xrange(stop) -> xrange object xrange(start, stop[, step]) -> xrange o ...

  2. php项目核心业务（增、删、改、查）（第三篇）

    对增删改查数据库的封装 //php对数据库的封装 //Mysql_fetach($sql)函数查询所有的 function Mysql_fetach($sql){ $conn=mysqli_conne ...

  3. 使用 windows 下的 secureCRT 软件的 通过 sftp 上传和下载文件到远端 linux 设备

    secureCRT 按下ALT+P就开启新的会话进行ftp操作. 输入:help命令,显示该FTP提供所有的命令 pwd:  查询linux主机所在目录(也就是远程主机目录) lpwd: 查询本地目录 ...

  4. python自动化开发-[第二十五天]-scrapy进阶与flask使用

    今日内容概要 1.cookie操作 2.pipeline 3.中间件 4.扩展 5.自定义命令 6.scrapy-redis 7.flask使用 - 路由系统 - 视图 - 模版 - message( ...

  5. CentOS 7.0下使用yum安装MySQL

    CentOS7默认数据库是mariadb,配置等用着不习惯,因此决定改成mysql,但是CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1 ...

  6. go 学习资源和GitHub库

    go httprouter 源码包 https://github.com/julienschmidt/httprouter 用例 https://github.com/gsingharoy/httpr ...

  7. 运维监控-基于yum的方式部署 Zabbix Agent 4.0 版本

    运维监控-基于yum的方式部署 Zabbix Agent 4.0 版本 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 上一篇博客我们分享了如何基于yum的方式部署zabbix 4. ...

  8. C++ cout格式化输出（转）

    C++ cout格式化输出(转) 这篇文章主要讲解如何在C++中使用cout进行高级的格式化输出操作,包括数字的各种计数法(精度)输出,左或右对齐,大小写等等.通过本文,您可以完全脱离scanf/pr ...

  9. 7、JPA-映射-双向一对多

    一个用户对应多个订单,多个订单对应一个用户,不管查哪一边都可以得到另一边的信息 实体类 Customer package com.jpa.yingshe; import javax.persisten ...

  10. js异步下载文件请求

    注意 :通常下载文件是用get请求 window.location.href=url; 但是 我们需要下载完成监听,所以必须要异步执行.用常规的ajax是不可以的.我们要用blob对象来实现1.原生的 ...