动画（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. JS事件（四）坐标位置

    1.客户区坐标位置  (相对于客户端视口,而无关浏览器缩放) clientX与clientY:表示事件发生时鼠标在视口的坐标,不包括页面滚动距离,因此不代表鼠标在页面上的位置. 2.页面坐标位置 pa ...

  2. halcon图像处理的基本思路

    原图素材,1.jpg 过程图: 结果图: 代码及注意事项: read_image (Image, 'C:/Users/Jv/Desktop/1.jpg') rgb1_to_gray (Image, G ...

  3. SPEL表达式

    https://www.cnblogs.com/best/p/5748105.html

  4. Python之包

    包是一种通过使用'.模块名'来组织python模块名称空间的方式.创建包是为了用文件夹将文件/模块组织起来,创建包的目的不是为了运行,而是为了被导入使用.包的本质就是一个文件,其功能是将文件组织起来, ...

  5. bzoj1003 最短路+dp

    遇到小范围数据的题目就容易被限制了思维,我单知道数据小可以跑很多遍最短路,但我没想到暴力跑N ^ 2的最短路也能过 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输 ...

  6. springboot下整合各种配置文件

    本博是在springboot下整合其他中间件,比如,mq,redis,durid,日志...等等  以后遇到再更.springboot真是太便捷了,让我们赶紧涌入到springboot的怀抱吧. ap ...

  7. python 模块一(random,counter,defaultdict,time,wraps,reduce) 栈 队列 双向队列

    ####################总结####################### 模块:你写的py文件 引用其他模块 1.import 模块 2.from 模块 import 功能,类,变量 ...

  8. 6.Hystrix-超时设置

    由于客户端请求服务端方法时,服务端方法响应超过1秒将会触发降级,所以我们可以配置Hystrix默认的超时配置 如果我们没有配置默认的超时时间,Hystrix将取default_executionTim ...

  9. 3.Zuul-过滤器

    1.什么是Zuul? 路由+过滤器=Zuul,核心是一系列的过滤器 2.Zuul的过滤器: pre:可以在请求被路由之前调用 route:在路由请求时候被调用 post:在route和error过滤器 ...

  10. java和c#通过esb服务互调用组件

    场景:java和c#写的服务.站点,互相任意调用.实现一切即服务. 解决方案:使用这种轻量级的esb架构,通过tcp通信解决通信传输问题,总线服务解决服务地址问题,契约解决数据交互问题.由于组件封装了 ...