jquery show、hide、fadeIn、fadeOut、slideUp等的用法

4人阅读 评论(0) 收藏 举报
分类:


1,show()方法和hide()方法

$("selector").show()  从display:none还原元素默认或已设置的display属性
$("selector").hide()  设置元素的display样式为none,等于$("selector").css("display","none")
(注: 传入参数后,.show()和.hide()方法同时动画改变元素的width,height和透明属性;传入参数控制显隐速度,单位毫秒, 如.show(600),也可传入fast,normal,slow,fast为200毫秒,normal为400毫秒,slow为600毫秒)

2,fadeIn()方法和fadeOut()方法
$("selector").fadeIn()  控制透明度在指定时间内从display:none提高至完全显示
$("selector").fadeOut()  控制透明度在指定时间内降低至display:none;

3,slideUp()方法和slideDown()方法
$("selector").slideUp()  控制元素高度在指定时间内从下到上缩短至display:none;
$("selector").slideDown() 控制元素高度在指定时间内从display:none延伸至完整高度

4,自定义动画方法animate()
$("selector").animate(params,speed,callback); 
 params:一个包含样式属性及值的映射,比如{property1:"value1",property2:"value2",...}
 speed:速度参数,可选
 callback:在动画完成时执行的参数(即回调函数),可选


hide隐藏的效果是从下至上或从右下到左上的慢慢折叠缩小fadeOut的淡出效果是整体淡化直至消失


查看评论

Jquery hide、show、fadeIn、fadeOut 竟然可以延迟

jQuery hide() 和 show()通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:$("#hide").click(function(){ ...
  • u011944141
  • u011944141
  • 2017-02-09 11:55:08
  • 1310

jQuery中 hide和fadeOut的区别 show和fadeIn的区别

原文出外:http://www.yoda360.com/post/22.html hide和fadeOut 显示效果有什么区别? show和fadeIn显示效果都一样? 很多朋友在学习jQuery...
  • chelen_jak
  • chelen_jak
  • 2013-12-19 17:07:08
  • 5913

jQuery学习21---简单动画效果,show,hide,slideUp,slideDown,fadeOut,fadeIn

show(),hide()如果不带参数,则立即显示,或隐藏,如果指定速度参数则会 用指定时间进行动态显示,隐藏,单位为毫秒,也可以使用三个内置的速度 fast(200ms) slow(600ms)...
  • zheng0518
  • zheng0518
  • 2013-06-30 16:09:50
  • 3749

jQuery-动画效果animate() slideDown() slideUp() fadeIn() fadeOut()

JQuery动画 以下JS代码公用的HTML:   Show:Paragraph 2 Show:Paragraph 2...
  • qiqingjin
  • qiqingjin
  • 2016-01-15 21:38:43
  • 2432

jQuery动画效果(show与hide/toggle/slideUp/slideToggle/fadeIn/fadeTo)

1、show()与hide() show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为: $(selector).hide(speed,[callback])和$(selecto...
  • yeyang123
  • yeyang123
  • 2015-07-29 16:45:26
  • 2623

jquery 如何判断是否已经fadein/fadeout? 判断是否隐藏hide()/show()

首先判断是否hide和show可以用 $('#header').is(":hidden"); 不过对于fadein fadeout不好使,方法就是定义一个变量,然后在回调函数里面赋值,看代码:...
  • lanmanck
  • lanmanck
  • 2016-11-03 21:11:52
  • 2008

前端优化小知识

CSS高消耗属性在绘制前需要浏览器进行大量计算:box-shadowsborder-radiustransparencytransformsCSS filters(性能杀手)避免过分重排当发生重排的时...
  • qq_30938705
  • qq_30938705
  • 2018-03-26 15:01:27
  • 41

jQuery中的slideUp()、slideDown()、hide()、show()

slideUp(speed,[callback])通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式...
  • guoquanyou
  • guoquanyou
  • 2008-10-20 15:43:00
  • 22840

jQuery中fadeIn、fadeOut、fadeTo的用法(图片隐藏与显示)

#img1     {         width:400px; height:500px;         }                     $(function ()...
  • linlin2294592017
  • linlin2294592017
  • 2013-05-07 17:11:37
  • 7433
    个人资料
    等级:
    访问量: 1万+
    积分: 665
    排名: 7万+