jQuery控制元素显示.隐藏.切换.滑动的方法总结

2014-07-13  来源:本站原创  分类:jquery  人气:3 

这篇文章主要介绍了jQuery控制元素显示、隐藏、切换、滑动的方法总结,本文讲解了hide()、show() 、slideDown、slideUp、 slideToggle、fadeIn()、fadeOut()、fadeTo()等方法使用实例,需要的朋友可以参考下

jQuery 隐藏和显示

通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示:
实例

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

hide() 和 show() 都可以设置两个可选参数:speed 和 callback。
语法:

复制代码 代码如下:

$(selector).hide(speed,callback)
$(selector).show(speed,callback)

speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
实例

复制代码 代码如下:

$("button").click(function(){

$("p").hide(1000);

});

callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

jQuery 滑动函数 - slideDown, slideUp, slideToggle

jQuery 拥有以下滑动函数:

复制代码 代码如下:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

speed 参数可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例

复制代码 代码如下:

$(".flip").click(function(){

$(".panel").slideDown();

});

jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下 fade 函数:

复制代码 代码如下:

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

jQuery 自定义动画

jQuery 函数创建自定义动画的语法:

复制代码 代码如下:

$(selector).animate({params},[duration],[easing],[callback])

关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性:

复制代码 代码如下:

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是:"slow", "fast", "normal" 或毫秒。
实例

复制代码 代码如下:

<script type="text/javascript">

$(document).ready(function(){

$("#start").click(function(){

$("#box").animate({height:300},"slow");

$("#box").animate({width:300},"slow");

$("#box").animate({height:100},"slow");

$("#box").animate({width:100},"slow");

});

});

</script> 
函数 描述
$(selector).hide() 隐藏被选元素
$(selector).show() 显示被选元素
$(selector).toggle() 切换(在隐藏与显示之间)被选元素
$(selector).slideDown() 向下滑动(显示)被选元素
$(selector).slideUp() 向上滑动(隐藏)被选元素
$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
$(selector).fadeIn() 淡入被选元素
$(selector).fadeOut() 淡出被选元素
$(selector).fadeTo() 把被选元素淡出为给定的不透明度
$(selector).animate() 对被选元素执行自定义动画
相关文章
  • jQuery控制元素显示.隐藏.切换.滑动的方法总结 2014-07-13

    这篇文章主要介绍了jQuery控制元素显示.隐藏.切换.滑动的方法总结,本文讲解了hide().show() .slideDown.slideUp. slideToggle.fadeIn().fadeOut().fadeTo()等方法使用实例,需要的朋友可以参考下 jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(function(){ $("p").

  • jQuery控制TR显示隐藏的几种方法 2014-05-29

    使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,其他方法祥看本文 网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: 这行不隐藏 这行要隐藏 这行要隐藏 那么控制显隐可以直接使用 for(var i = 1; i < tr_len; i++){ //tr_len是要控制的tr个数 $("#tr_"+i).hide(); } 第二种方法,是使用$.each

  • jQuery控制TR显示隐藏的三种常用方法 2014-06-04

    第一种方法是使用id,第二种方法是使用$.each(),第三种方法是通过属性筛选器,还有很多,大家自家挖掘吧 网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: <table> <tr><td>这行不隐藏</td></tr> <tr id="tr_1"><td>这行要隐藏</td></tr>

  • javascript 控制 html元素 显示/隐藏实现代码 2015-03-18

    javascript 控制 html元素 显示/隐藏,下面是一些逐步的实现原理. 1.编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s)

  • jquery判断元素是否隐藏的多种方法 2014-02-03

    这篇文章主要介绍了jquery判断元素是否隐藏的多种方法,本文总结了多种判断方法实例,需要的朋友可以参考下 第一种:使用CSS属性 var display =$('#id').css('display'); if(display == 'none'){ alert("被你发现了,我是隐藏的啦!"); } 第二种:使用jquery内置选择器 假设我们页面有这么个标签, 复制代码 代码如下: <div id="test"> <p>仅仅是测试所用&

  • jQuery控制的不同方向的滑动(向左.向右滑动等) 2014-08-26

    这篇文章主要介绍了jQuery控制的不同方向的滑动(向左.向右滑动等),需要的朋友可以参考下 引入jquery.js,复制以下代码,即可运行. <style type="text/css"> .slide { position: relative; height: 200; lightyellow; } .slide .inner { position: absolute; left: 0; bottom: 0; height: 100; lightblue; width:

  • jquery实现焦点图片随机切换效果的方法 2014-04-09

    这篇文章主要介绍了jquery实现焦点图片随机切换效果的方法,涉及jQuery插件jquery.easing.1.3.js的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现焦点图片随机切换效果的方法.分享给大家供大家参考.具体如下: 1. 运行效果如下图所示: 2.完整实例代码点击此处本站下载. 3.完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c

  • 使用JavaScript切换DOM元素显示状态的7种方法 2013-10-16

    通过JavaScript切换一个元素的显示状态的方法实际上是不可计数的,但在这其中确实有一些非常实用的技巧.追溯到上个世纪90年代后期,切换元素的状态可能是JavaScript开发书籍最早介绍的技巧之一了.实际上就算在现在,如果能够合理地控制元素的显示和隐藏,同样可以大幅度提高用户的体验. 不管怎样,这里介绍实现这种效果的七种方式. 正文开始 第一种,可能是最简单的,也是大家最常用的方式. 最直接的切换方式 // 显示document.getElementById("element")

  • 让jQuery Mobile不显示讨厌loading界面的方法 2014-11-28

    jQuery Mobile总是显示讨厌的loading界面,下面有个不错的解决方法,大家可以参考下 jQuery Mobile 的一个BUG: 当不采用 ajax 以及 他自己的 back 返回的时候,即: 点击浏览器后退按钮时,将会从缓存之中加载页面,此时,讨厌的 loading 动画出来了,而且一直不消失. 网上找了好多解决方法,搜索了好久都没有好用的,今天突然想起来个釜底抽薪,直接动jqeury-mobile 的类库. 用编辑器打开, 找到显示pageLoading的方法, showPag

  • JQuery 将元素显示在屏幕的中央的代码 2014-05-13

    在网站开发中我们经常需要将对话框显示在屏幕的中央.如果使用Javascript因为浏览器实现的差异,实现起来非常麻烦.但是JQuery可以很简单实现的搞定这一切. (function($){ $.fn.center = function(){ var top = ($(window).height() - this.height())/2; var left = ($(window).width() - this.width())/2; var scrollTop = $(document).s

  • jQuery操作元素css样式的三种方法 2014-11-08

    jQuery里提供三种方法来改变页面元素的样式,虽然它们和传统方法的思想相通,但是却节省了许多代码 我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句话 - "jQuery让JavaScript代码变得简洁!" 1. addC

  • JQuery显示隐藏页面元素的方法总结 2014-10-05

    这篇文章主要介绍了JQuery显示隐藏页面元素的方法总结,本文分别讲解了show().hide().toggle().slideDown().css()5种控制显示隐藏某个DIV或P标签等页面元素的方法,需要的朋友可以参考下 在jquery中显示隐藏div方法方法有很多种,如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作,下面我来介绍. show()方法 显示出隐藏的 <p> 元素. $(".btn2

  • jQuery判断元素是否是隐藏的代码 2013-12-29

    jQuery判断元素显示或隐藏, is 函数,需要的朋友可以参考下. 核心代码: if($("#elem_id").is(":hidden")) { } 实例代码1: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>

  • jQuery效果 slideToggle() 方法(在隐藏和显示之间切换) 2015-04-11

    slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 实例 通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素: $(".btn1").click(function(){ $("p").slideToggle(); }); 定义和用法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 语法 $(selecto

  • jquery toggle使用/控制显示隐藏方法事件,PS:解决第一次无效 - 自由人 2013-03-04

    很多时候我们都需要这种有规律的切换,第一次点击做什么,第二次做什么,第三次做什么-- $(this).toggle( function () { // 第一次-- }, function () { // 第二次-- } ).trigger('click'); toggle里面你可以写无数个函数(function),jquery会按次数进入循环,如果你只写2个,第三次进入的还是第一个方法--如果3个方法,第四次进入的就是第一个方法--你懂的-- 注意:最关键的一点,很多同僚遇到第一次无效的情况,那

  • 使用CSS3动画 animation 来控制元素的显示和隐藏 2014-07-24

    CSS3中 animation 和 transition 俩样式都能创建动画效果,而且是后台C++执行的,所以效率比普通jQuery的js模拟动画的效率高很多,所以建议大家能用css实现的效果都用css. transition的使用比较简单,这里就不介绍了,着重为大家介绍下 animation . animation 的css属性有很多,本文通过 animation-name 来控制启动动画和转换动画,以下是一个通过 animation 来控制元素的显示和隐藏的例子(仅支持webkit): <!

  • 用jQuery实现一些导航条切换,显示隐藏的实例代码 2014-05-10

    用jQuery实现一些导航条切换,显示隐藏的实例代码,需要的朋友可以参考一下 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航条在项目中的应用</title> <script language="javascript" type="text/javascript" src="

  • jQuery元素的隐藏与显示实例 2014-10-18

    这篇文章主要介绍了jQuery元素的隐藏与显示的方法,实例分析了hide与show的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery元素的隐藏与显示的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="tex

  • jQuery实现的导航条切换可显示隐藏 2014-11-04

    用jQuery实现一些导航条切换,显示隐藏,主要用到slideToggle( ),toggeClass( ),toggle() 用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航条在项目中的应用</

  • Jquery显示.隐藏元素以及添加删除样式 2015-03-14

    显示.隐藏元素我们可以通过css来实现:添加删除样式我们可以通过js或jquery来实现,下面为大家讲解的是使用jquery实现元素的显示隐藏及样式的添加与删除 <script type="text/javascript"> $(function () { //当input获取焦点后将其兄弟标签label隐藏 $("input").focus(function () { $(this).siblings("label").hide()