`
- 浏览:
321227 次
- 性别:
- 来自:
上海
-
引用
[size=medium][/size]
一、jQuery___效果(基本效果)
show()
概述
显示隐藏的匹配元素。
这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。
示例
描述:
显示所有段落
HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show()
show(speed, [callback])
概述
以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。
参数
speedString,Number
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (可选)Function
在动画完成时执行的函数,每个元素执行一次。
示例
描述:
用缓慢的动画将隐藏的段落显示出来,历时600毫秒。
HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show("slow");
描述:
用迅速的动画将隐藏的段落显示出来,历时200毫秒。并在之后执行反馈!
HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show("fast",function(){
$(this).text("Animation Done!");
});
描述:
将隐藏的段落用将近4秒的时间显示出来。。。并在之后执行一个反馈。。。
HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show(4000,function(){
$(this).text("Animation Done...");
});
hide()
概述
隐藏显示的元素
这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。
示例
描述:
隐藏所有段落
jQuery 代码:
$("p").hide()
hide(speed, [callback])
概述
以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。
参数
speedString,Number
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (可选)Function
在动画完成时执行的函数,每个元素执行一次。
示例
描述:
用600毫秒的时间将段落缓慢的隐藏
jQuery 代码:
$("p").hide("slow");
描述:
用200毫秒将段落迅速隐藏,之后弹出一个对话框。
jQuery 代码:
$("p").hide("fast",function(){
alert("Animation Done.");
});
toggle()
概述
切换元素的可见状态。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
示例
描述:
切换所有段落的可见状态。
HTML 代码:
<p>Hello</p><p style="display: none">Hello Again</p>
jQuery 代码:
$("p").toggle()
结果:
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
toggle(switch)
概述
根据switch参数切换元素的可见状态(ture为可见,false为隐藏)。
如果switch设为true,则调用show()方法来显示匹配的元素,如果switch设为false则调用hide()来隐藏元素。
参数
switchBoolean
用于确定显示/隐藏的开关
示例
描述:
切换所有段落的可见状态。
HTML 代码:
<p>Hello</p><p style="display: none">Hello Again</p>
jQuery 代码:
var flip = 0;
$("button").click(function () {
$("p").toggle( flip++ % 2 == 0 );
});
结果:
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
返回值:jQuerytoggle(speed, [callback])
概述
以优雅的动画切换所有匹配的元素,并在显示完成后可选地触发一个回调函数。
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。
参数
speedString,Number
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (可选)Function
在动画完成时执行的函数,每个元素执行一次。
示例
描述:
用600毫秒的时间将段落缓慢的切换显示状态
jQuery 代码:
$("p").toggle("slow");
描述:
用200毫秒将段落迅速切换显示状态,之后弹出一个对话框。
jQuery 代码:
$("p").toggle("fast",function(){
alert("Animation Done.");
});
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
更新至JQuery 1.4版本,本版是参考shawphy的1.4在线版本(http://jquery-api-zh-cn.googlecode.com/svn/trunk/xml/jqueryapi.xml)制作,更新了好多以前的内容,以前没仔细核对过,发现之前网上流行的chm版本基本都...
它是基本jQuery框架并提供了一定范围的用户接口和特性,以便于开发人员在移动应用上使用。使用该框架可以节省大量的js代码开发时间,尽管目前的版本还是不是一个稳定的版本。但它的应用效果已经备受瞩目。
2.3.1 基本选择器 2.3.2 层次选择器 2.3.3 过滤选择器 2.3.4 表单选择器 2.4 应用jQuery改写示例 2.5 选择器中的一些注意事项 2.5.1 选择器中含有特殊符号的注意事项 2.5.2 选择器中含有空格的注意事项 2.6 案例研究...
jquery弹出窗口效果 比较全 基本上所有的都包括了 功能齐全 修改方便 兼容所有浏览器
实现定时数据更新,若需要从后台提取数据请自行添加ajax方法传送数据。实现基本的股票翻牌效果,也可加工转换为消息滚动提示信息展示。
bxSlider 是一个 jQuery 的插件,它可以实现 Slider 和滚动效果。有丰富的API可以自定义不同的滚动效果。源码爱好者根据bxSlider官方提供的方法自己写了一个小小的演示页面,只是实现文字的滚动,当然也可用于图片的...
NULL 博文链接:https://cb123456.iteye.com/blog/2212633
jQuery是一个简洁快速的JavaScript库,它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。 jQuery适合于设计师、开发者以及那些还好者,...
静态html比较多 完全JQUERY模拟效果 @2012.2.24 webos 1.1 JS采用面向对象编写 仿webQQ基本功能 支持拖拽 桌面切换 右键 1级栏布局切换 应用自适应布局 @xiaofan @2012.3.9 webos 1.2 新增全局模式 @只支持...
本文实例讲述了jQuery实现基本淡入淡出效果的方法。分享给大家供大家参考,具体如下: jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元素 <!DOCTYPE html> <html> <...
2.1 JQuery基本语法 5 2.1.1 JQuery选择器 6 2.2 JQuery事件响应 8 2.2.1 常见的JQuery事件 9 2.2.2 淡入淡出效果 12 2.2.3 滑动效果 15 2.2.4 动画效果 18 2.2.5 终止动画 20 2.2.6 回调函数 20 2.2.7 方法链 22 ...
html商城网站源码包括登录注册 购物车 动态获取数据 jquery基本效果 php web前端开发 美乐乐家具网
《jQuery基础教程(第2版)》前6章以通俗易懂的方式介绍了jQuery的基本概念,主要包括jQuery的选择符、事件、效果、DOM操作、AJAX支持等。随后3章从理论到实践,通过表格操作、构建功能型表单、实现滑移和翻转效果等...
1.1.2 jQuery基本功能/2 1.1.3 搭建jQuery开发环境/3 1.1.4 编写第一个简单的jQuery应用/3 1.1.5 jQuery程序的代码风格/5 1.2 jQuery的简单应用/7 1.2.1 jQuery访问DOM对象/7 1.2.2 jQuery控制DOM对象/7 ...
jQuery的基本使用、选择器、效果、样式操作、属性操作、元素操作、尺寸操作、位置操作、以及事件注册、事件处理、事件对象、拷贝对象、多库共存、部分插件的使用
这是一款缩放效果的jquery图片轮播图,也就是大家熟悉的焦点图效果,带缩略图显示,操作方式上基本和常见的焦点图切换没什么区别,主要的区别就是图片的切换方式,不是滑动、也不是渐变,而是缩放形式,单击缩略图后...
jQuery是一个简洁快速的JavaScript库,它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。 jQuery适合于设计师、开发者以及那些还好者,...