jQuery控制元素显示、隐藏、切换、滑动的方法总结
更新时间：2015年04月16日 09:26:37 投稿：junjie
这篇文章主要介绍了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、layer实现弹出层的打开、关闭功能,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了jQuery AjaxUpload 上传图片代码的相关资料,需要的朋友可以参考下2016-02-02
此Jquery特效是一款Jquery+CSS3实现简洁大气带滑动效果的弹出层，在消息提示、弹出层显示内容、弹出层登录等，带遮罩效果，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-05-05
由于公司项目需要增加推广奖励功能，网站用户通过邀请地址发给QQ好友、论坛、个人网站之类，只要有通过邀请地址点击进来就算推广成功（当天同一个IP仅算一次），推广人会获得相应的奖励、积分等。2011-07-07
代码很简单主要是用到了JQuery的三个事件mouseover,mouseout,mousemove.2010-09-09
这篇文章主要介绍了对于jQuery性能的一些优化建议,jQuery是当下人气最高的JavaScript库,需要的朋友可以参考下2015-08-08
jQuery简单实现iframe的高度根据页面内容自适应的方法
这篇文章主要介绍了jQuery简单实现iframe的高度根据页面内容自适应的方法,给出了2种简单实现方法,涉及jQuery针对页面高度的动态获取与设置相关技巧,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了jQuery中animate()方法用法,以实例形式分析了animate()方法的功能、定义及具体使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
这个jQueryPad也是我无意中在网上看页面的时候看到的，下载下来试用了下，感觉很好，这个软件是使用WPF开发的（不过不开源，需要安装.NET Framework 3.5），整体界面很简洁。2010-05-05
jquery移除了live()、die(),新版事件绑定on()、off()的方法
下面小编就为大家带来一篇jquery移除了live()、die(),新版事件绑定on()、off()的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
最新评论