jQuery 基础教程（五）之使用jQuery创建动画效果

一、jQuery 中的动画: 隐藏和显示

（1）hide()

在 HTML 文档中, 为一个元素调用 hide() 方法会将该元素的 display 样式改为 none. 代码功能同 css(“display”, “none”);

（2）show()

将元素的 display 样式改为先前的显示状态.

以上两个方法在不带任何参数的情况下, 作用是立即隐藏或显示匹配的元素, 不会有任何动画. 可以通过制定速度参数使元素动起来.

以上两个方法会同时减少(增大)内容的高度, 宽度和不透明度.

二、jQuery 中的动画(2)

（1）fadeIn(), fadeOut()只改变元素的透明度.

fadeOut() 会在指定的一段时间内降低元素的不透明度, 直到元素完全消失. fadeIn() 则相反.

（2）slideDown(), slideUp(): 只会改变元素的高度

如果一个元素的 display 属性为 none, 当调用 slideDown() 方法时, 这个元素将由上至下延伸显示. slideUp() 方法正好相反, 元素由下至上缩短隐藏.

三、jQuery 中的动画(3)

（1）toggle(): 切换元素的可见状态: 如果元素时可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的.

（2）slideToggle(): 通过高度变化来切换匹配元素的可见性.

（3）fadeTo(): 把不透明度以渐近的方式调整到指定的值(0 – 1 之间).

jQuery 基础教程（五）之使用jQuery创建动画效果相关推荐

（转）jquery基础教程八 load方法及小技巧
首先我们看看手册上的描述 load(url, params, callback) 装入一个远程HTML内容到一个DOM结点. 注意:避免用装入的scripts脚本,装入脚本改用$.getScript. ...
[SQL基础教程]1-4 SQL 表的创建
[SQL基础教程]1-4 SQL 表的创建创建数据库语法 CREATE DATABASE <数据库名称> // example CREATE DATABASE shop; 创建表语法 ...
html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
jQuery基础教程
调试环境:webstorm 版本11.0.1 Chrome 版本54.0.2840.99 声明:本博客借鉴了w3school在线教程,如果需要详细的教程可以访问http://www.w3school. ...
jQuery 基础教程（一）之jQuery的由来及简介
一.RIA技术 (1)RIA(Rich Internet Applications) 富互联网应用,具有高度互动性.丰富用户体验以及功能强大的客户端. (2)常见的RIA技术 Ajax Flex Sl ...
jQuery 基础教程（二）之jQuery对象与DOM对象
一.jQuery 对象 (1)jQuery 对象就是通过 jQuery 包装DOM对象后产生的对象 (2)Query 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以 ...
jquery for循环_前端基础入门五（掌握jQuery的常用api，实现动态效果）
jQuery基本概念学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果. 为什么要学习jQuery? [01-让div显示与设置内容.html] 使 ...
jQuery学习教程五：jQuery 效果 - 淡入淡出, Fading 方法
实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法. <!DOCTYPE html> <html> <head> <script ...
jQuery 系列教程14篇-从选择器到动画ajax插件开发
#第 004 期# jQuery是一个快速,小巧,功能丰富的JavaScript库. 它使HTML文档遍历和操作,事件处理和动画等操作变得更加简单. jQuery 快速入门(一) 开天辟地入门篇 ...
jQuery基础之（一）jQuery概述
1.jQuery的简介就像上节所将到的Ajax框架一样,简单的说,jQuery是一个优秀的javascript框架,它能够让用户方便的处理html,events(冒泡)事件,动画效果,ajax交互等 ...

jQuery 基础教程（五）之使用jQuery创建动画效果

jQuery 基础教程（五）之使用jQuery创建动画效果相关推荐

最新文章

热门文章

jQuery 基础教程 （五）之使用jQuery创建动画效果

jQuery 基础教程 （五）之使用jQuery创建动画效果相关推荐

最新文章

热门文章

jQuery 基础教程（五）之使用jQuery创建动画效果

jQuery 基础教程（五）之使用jQuery创建动画效果相关推荐