`
wawa129
  • 浏览: 321227 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery__效果(基本效果)

 
阅读更多
引用
[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.");
});
分享到:
评论

相关推荐

    JQuery_1.4_API

    更新至JQuery 1.4版本,本版是参考shawphy的1.4在线版本(http://jquery-api-zh-cn.googlecode.com/svn/trunk/xml/jqueryapi.xml)制作,更新了好多以前的内容,以前没仔细核对过,发现之前网上流行的chm版本基本都...

    jQuery_Mobile使用指南

    它是基本jQuery框架并提供了一定范围的用户接口和特性,以便于开发人员在移动应用上使用。使用该框架可以节省大量的js代码开发时间,尽管目前的版本还是不是一个稳定的版本。但它的应用效果已经备受瞩目。

    锋利的jQuery_高清_书签.part2

    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弹出窗口效果 比较全 兼容所有浏览器

    jquery弹出窗口效果 比较全 基本上所有的都包括了 功能齐全 修改方便 兼容所有浏览器

    jquery实现股票数据翻牌效果

    实现定时数据更新,若需要从后台提取数据请自行添加ajax方法传送数据。实现基本的股票翻牌效果,也可加工转换为消息滚动提示信息展示。

    bxSlider jQuery滚动效果插件+Demo示例

    bxSlider 是一个 jQuery 的插件,它可以实现 Slider 和滚动效果。有丰富的API可以自定义不同的滚动效果。源码爱好者根据bxSlider官方提供的方法自己写了一个小小的演示页面,只是实现文字的滚动,当然也可用于图片的...

    JQuery的基本效果

    NULL 博文链接:https://cb123456.iteye.com/blog/2212633

    jQuery中文参考手册(附jquery1.26)

    jQuery是一个简洁快速的JavaScript库,它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。 jQuery适合于设计师、开发者以及那些还好者,...

    webos1.2 JQUERY模拟效果

    静态html比较多 完全JQUERY模拟效果 @2012.2.24 webos 1.1 JS采用面向对象编写 仿webQQ基本功能 支持拖拽 桌面切换 右键 1级栏布局切换 应用自适应布局 @xiaofan @2012.3.9 webos 1.2 新增全局模式 @只支持...

    jQuery实现基本淡入淡出效果的方法详解

    本文实例讲述了jQuery实现基本淡入淡出效果的方法。分享给大家供大家参考,具体如下: jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元素 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt...

    JQuery教程自学笔记

    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前端开发 美乐乐家具网

    html商城网站源码包括登录注册 购物车 动态获取数据 jquery基本效果 php web前端开发 美乐乐家具网

    jQuery基础教程

    《jQuery基础教程(第2版)》前6章以通俗易懂的方式介绍了jQuery的基本概念,主要包括jQuery的选择符、事件、效果、DOM操作、AJAX支持等。随后3章从理论到实践,通过表格操作、构建功能型表单、实现滑移和翻转效果等...

    jQuery权威指南-源代码

    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基本知识思维导图.xmind

    jQuery的基本使用、选择器、效果、样式操作、属性操作、元素操作、尺寸操作、位置操作、以及事件注册、事件处理、事件对象、拷贝对象、多库共存、部分插件的使用

    缩放效果的jquery图片轮播图.rar

    这是一款缩放效果的jquery图片轮播图,也就是大家熟悉的焦点图效果,带缩略图显示,操作方式上基本和常见的焦点图切换没什么区别,主要的区别就是图片的切换方式,不是滑动、也不是渐变,而是缩放形式,单击缩略图后...

    JQuery文档以及文件包

    jQuery是一个简洁快速的JavaScript库,它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。 jQuery适合于设计师、开发者以及那些还好者,...

Global site tag (gtag.js) - Google Analytics