jquery的效果(动画)

  • show

    • 概念:显示隐藏的匹配元素 语法:show(speed,callback)
    • 参数:speed:三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值(如:1000毫秒==1秒)
    • callback:在动画完成时执行的函数,每个元素执行一次
  • hide
    • hide(speed,callback)跟show使用方法类似,表示隐藏显示的元素。
    • 可以通过show()和hide()方法,来动态控制元素的显示隐藏
  • toggle
    • 如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
  • slideDown
    • 概念:通过高度变化(向下增大)来到动态地显示所有匹配的元素,在显示完成后触发一个回调函数
    • 用法和参数跟上面类似
  • slideUp
    • 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
    • 用法和参数跟上面类似
  • slideToggle
    • 概念:通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数
    • 跟toggle用法类似
  • fadeIn
    • 概念:通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
    • 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化
  • fadeOut
    • 概念:通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。
    • 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
  • fadeTo
    • 概念:把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
    • 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
  • fadeToggle
    • 概念:通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。
    • 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
    • 实现淡入淡出的效果就是使用此方法
  • animate
    • 概念:用于创建自定义动画的函数
    • 语法:animate(params,[speed],[fn])
    • params:一组包含作为动画属性和终值的样式属性和及其值的集合
    • speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

    • fn:在动画完成时执行的函数,每个元素执行一次。

  • stop
    • 概念:停止所有在指定元素上正在运行的动画
    • 语法:stop([clearQueue],[jumpToEnd])
    • clearQueue:如果设置成true,则清空队列。可以立即结束动画。
    • gotoEnd:让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等
  • delay
    • 概念:用来做延迟的操作
    • 语法:delay(1000),一秒之后做后面的操作

jQuery的效果(动画)的更多相关文章

  1. jQuery 效果- 动画

    jQuery animate() 方法允许您创建自定义的动画. jQuery 动画实例 jQuery jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自 ...

  2. [学习笔记]jQuery实现一些动画效果的方法

    jQuery实现效果的方法 1,隐藏和显示:hide(),show(),toggle()  // [ˈtɑ:gl]切换 语法: $(selector).hide(speed,callback); $( ...

  3. jQuery 效果 – 动画

    在使用jQuery动画时,你可能想要实现更加丰富的效果,那么你可以通过使用 jQuery animate() 方法自定义动画来达到目的,具体的使用方法如下文所述. jQuery animate() 方 ...

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

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

  5. Jquery如何使用动画效果改变背景色

    Jquery如何使用动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只 ...

  6. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  7. jquery的animate({})动画整理

    在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...

  8. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. jQuery学习笔记(四)jQuery中的动画

    目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...

随机推荐

  1. express中app.get和app.use的解析

    app.get(path,callback)中的callback只能是函数 app.use(path,callback)中的callback既可以是router对象又可以是函数 当其是router对象 ...

  2. 有史以来性价比最高最让人感动的一次数据库&amp;SQL优化(DB &amp; SQL TUNING)——半小时性能提升千倍

    昨天,一个客户现场人员急急忙忙打电话找我,说需要帮忙调优系统,因为经常给他们干活,所以,也就没多说什么,先了解情况,据他们说,就是他们的系统最近才出现了明显的反应迟钝问题,他们的那个系统我很了解,软硬 ...

  3. Mysql可重复读原理

    mysql可重复读现象及原理分析 InnoDB---可重复读隔离级别的底层实现原理 概念 可重复读的实现 Repeatable Read(可重复读):一个事务在执行过程中可以看到其他事务已经提交的新插 ...

  4. dubbo源码分析(一)-从xml到我们认识的Java对象

    项目中用的dubbo的挺多的,然后随着自己对dubbo的慢慢深入,自己也希望能够了解dubbo的底层实现,这半年来一直在看dubbo的源码,有点断断续续的,于是准备写一个dubbo源码系列的分析文章, ...

  5. Ubuntu上安装MySQL

    Ubuntu上安装MySQL非常简单只需要几条命令就可以完成.`````` sudo apt-get update sudo apt-get install mysql-server 会弹出提示,让输 ...

  6. linux下iostat命令详解

    iostat用于输出CPU和磁盘I/O相关的统计信息 iostat语法 用法:iostat [ 选项 ] [ <时间间隔> [ <次数> ]] 常用选项说明: -c:只显示系统 ...

  7. JavaScipt 中的事件循环(event loop),以及微任务 和宏任务的概念

    说事件循环(event loop)之前先要搞清楚几个问题. 1. js为什么是单线程的? 试想一下,如果js不是单线程的,同时有两个方法作用dom,一个删除,一个修改,那么这时候浏览器该听谁的?   ...

  8. learning ddr RTT

    Rtt: Dynamic ODT.DDR3引入的新特性.在特定的应用环境下为了更好的在数据总线上改善信号完整性, 不需要特定的MRS命令即可以改变终结强度(或者称为终端匹配).在MR2中的A9和A10 ...

  9. unity中导入插件时报错处理办法

    错误如下: Unhandled Exception: System.TypeLoadException: Could not load type 'System.ComponentModel.Init ...

  10. 【资料收集】PCA降维

    重点整理: PCA(Principal Components Analysis)即主成分分析,是图像处理中经常用到的降维方法 1.原始数据: 假定数据是二维的 x=[2.5, 0.5, 2.2, 1. ...