JQuery 动画显示和隐藏效果

最新推荐文章于 2023-07-20 18:29:17 发布
置顶 最新推荐文章于 2023-07-20 18:29:17 发布
阅读量563 收藏
点赞数
分类专栏： HTML5
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>JQuery 动画显示和隐藏效果</title>  
  6. <script>  
  7.     /*   
  8.         1.$("页面元素类型").show(时间, 回调函数);以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数;指定时间后依次执行回调函数，页面上能找到几个，就连着执行几次。时间可以为毫秒数，也可以是slow,nomal,fast  
  9.         2.$("页面元素").toggle();切换此元素的显示状态。如果它是显示的，让它隐藏，如果它是隐藏的，让它显示。  
  10.         3.$("页面元素").slideDown(时间,回调函数)通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。  
  11.         4.$("页面元素").fadeIn(时间,回调函数)通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。  
  12.     */  
  13. </script>  
  14. <script language="javascript" src="jquery-1.3.2.min.js" ></script>  
  15.   
  16. <script>  
  17.     function test_show() {  
  18.         //$("#myImage").show(2000,function(){alert("演示完毕！");});   
  19.         $("img").show(2000,function(){alert("演示完毕！");});      
  20.     }  
  21.     function test_hide() {  
  22.         //$("#myImage").hide(2000,function(){alert("演示完毕！");});   
  23.         $("img").hide(2000,function(){alert("演示完毕！");});      
  24.     }  
  25.       
  26.     function test_slideDown() {  
  27.         $("#myImage2").slideDown(500,function(){alert("滑动向下放大完毕");});  
  28.     }  
  29.     function test_slideUp() {  
  30.         $("#myImage2").slideUp(2000,function(){alert("滑动向上缩小完毕");});  
  31.     }  
  32.     function test_slideToggle() {  
  33.         $("#myImage2").slideToggle(1000,function(){alert("切换滑动效果完毕");});  
  34.     }  
  35.       
  36.     function test_fadeIn() {  
  37.         $("#myImage3").fadeIn(2000,function(){alert("淡入完毕");});   
  38.     }  
  39.     function test_fadeOut() {  
  40.         $("#myImage3").fadeOut(2000,function(){alert("淡出完毕");});      
  41.     }  
  42.     function test_fadeTo() {  
  43.         $("#myImage3").fadeTo(2000,0.25,function(){alert("调整到指定透明度完毕");});    
  44.     }  
  45. </script>  
  46. </head>  
  47.   
  48. <body>  
  49. <div>  
  50.     <input type="button" value="显示" onClick="$('p').show();" />  
  51.     <input type="button" value="隐藏" onClick="$('p').hide();" />  
  52.     |||       
  53.     <input type="button" value="延时显示" onClick="test_show()" />  
  54.     <input type="button" value="延时隐藏" onClick="test_hide()" />  
  55.     <input type="button" value="切换元素的可见状态" onclick="$('#myImage1').toggle()" />  
  56.     |||       
  57.     <input type="button" value="滑动向下放大" onClick="test_slideDown()" />  
  58.     <input type="button" value="滑动向上缩小" onClick="test_slideUp()" />  
  59.     <input type="button" value="切换滑动效果" onClick="test_slideToggle()" />  
  60.     |||       
  61.     <input type="button" value="淡入" onClick="test_fadeIn()" />  
  62.     <input type="button" value="淡出" onClick="test_fadeOut()" />  
  63.     <input type="button" value="调整到指定透明度" onClick="test_fadeTo()" />  
  64. </div>      
  65.     <p style="display:none">Hello World!</p>  
  66.     <p style="display:none">Hello World!</p>  
  67.     <p style="display:none">Hello World!</p>  
  68.     <p style="display:none">Hello World!</p>  
  69.       
  70.     <img id="myImage" src="images/test.jpg" style="display:none" />  
  71.       
  72.     <img id="myImage1" src="images/test1.jpg" style="display:none" />  
  73.       
  74.     <img id="myImage2" src="images/test2.jpg" style="display:none" />  
  75.       
  76.     <img id="myImage3" src="images/test3.jpg" style="display:none" />  
  77. </body>  
  78. </html>  
牵牛果
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
10-23
主要介绍了jQuery动画显示和隐藏效果实现方法,并附带了demo源码供读者下载参考,涉及jQuery操作图片的显示,隐藏及淡入淡出等效果,需要的朋友可以参考下
Educoder/头歌JAVA——jQuery动画
舟舟的博客
12-12 3585
动画是使元素实现从一种样式逐渐变化为另一种样式的效果。jQuery动画包括隐藏/显示，淡入/淡出，上滑/下滑，自定义动画等效果。 本实训的主要内容是jQuery动画，从动画效果的方法到自定义动画，可以创建自己想要的动画效果。
09-jQuery-动画-显示和隐藏元素
记录java学习日常~
05-24 2452
在 show() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素显示出来，动画完成后执行回调函数。在 slideUp() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素收缩，动画完成后执行回调函数。在 hide() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型隐藏元素，动画完成后执行回调函数。
jQuery的隐藏和显示动画效果 及 自定义动画
最新发布
m0_58679504的博客
07-20 287
show()、hide()、toggle()、slideDown()、slideUp、slideToggle()、fadeIn()、fadeOut()、fadeTo()、fadeToggle()、animate()
【jQuery动画】显示与隐藏效果
m0_55394328的博客
10-03 2594
在网页开发中，适当地使用动画可以使页面更加美观，进而增强用户体验。jQuery中内置了一系列方法用于实现动画，当这些方法不能满足实际要求时，用户也可以自定义动画。本期我们一起来了解一下显示与隐藏效果吧~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
JQUery 动画——隐藏和显示
专注Java（全栈）应用开发，求知若渴，虚心若愚，而知也无涯
03-17 330
切换3个布局：根据formid进行切换： <div id = "doorInfo" class="panel panel-default doorinfo" style="display:none"> <div class="panel-heading">门信息</div> <div class="panel-body"> ...
jQuery 效果- 隐藏和显示
12-13
jQuery 效果- 隐藏和显示 隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！ 点击 显示/隐藏面板 因为时间是宝贵的，我们提供快捷方便的学习方法。 在软件开发网,你可以学习需要的知识。 实例 简单的jQuery ...
jQuery动画效果鼠标经过图层显示隐藏图层
04-14
NULL 博文链接：https://guoqiantong.iteye.com/blog/1747019
jQuery 动画效果
01-07
一、基本效果（显示 / 隐藏） 三个方法的参数是一样的： speed：动画速度，可以是(“slow”,“normal”, or “fast”)或数字 easing：动画效果 “swing”或”linear” fn：动画执行完成之后要执行的操作 注意： 如果...
jQuery原生的动画效果
12-11
toggle：显示或隐藏选中元素。 fadeIn：将选中元素的不透明度逐步提升到100%。 fadeOut：将选中元素的不透明度逐步降为0%。 slideDown：垂直向下滑动显示选中元素。 slideUp：垂直向上滑动隐藏当前元素。 ...
jQuery入门第二章（显示隐藏动画）
m0_56344602的博客
09-06 870
基本概念 隐藏其实就是 display:none; 显示可以有很多种：display:block flex inline-block，block 最常见。 基础显示隐藏 以上方法传入时间后才有动画动画效果，不传入时间没有动画效果。 淡入淡出显示隐藏 就是透明度的变化。 没有传入时间也有动画效果，默认值是 400 毫秒 滑动显示隐藏 高度的变化 自定义动画 核心方法 .animate( 样式对象, 时间, 回调函数 ) 被称为动态的 .css( ) 参考代码 ...
jQuery动画（显示隐藏，淡入淡出，滑动）
TangJing_的博客
07-30 2704
目录 分类 基本动画函数 显示元素 交替显示隐藏 滑动效果 向上收缩效果 向下展开效果 交替伸缩样式 淡入淡出效果 淡入效果 淡出效果 自定义不透明度 jQuery的动画函数 分类 基本动画函数：既有透明度渐变，又有滑动效果。是最常用的动画效果函数 滑动动画函数：仅使用滑动渐变效果 淡入淡出动画函数：仅使用透明度渐变效果 基本动画函数 显示元素 jQuery中用来显示已经被隐藏的元素的方法是使用show(speed,[callback])函数，他的动画效果是向左上..
jQuery效果（隐藏和显示）
shao_xuan_的博客
01-05 7155
jQuery效果解析隐藏和显示hide()和show()jQuery toggle()淡入淡出jQuery fadeIn() 方法jQuery fadeOut() 方法jQuery fadeToggle() 方法jQuery fadeTo() 方法滑动jQuery slideDown() 方法jQuery slideUp() 方法jQuery slideToggle() 方法自定义动画jQuery animate() 方法停止动画jQuery stop() 方法 隐藏和显示 hide()和show() hi
jQuery动画的显示与隐藏效果！
xiaoxijinger的博客
07-20 432
jQuery中用于控制元素显示和隐藏效果的方法如表1所示。 表1 控制元素的显示和隐藏 在表1中，参数speed表示动画的速度，可设置为动画时长的毫秒值(如1000)，或预定的3种速度(slow、fast和normal);参数easing表示切换效果，默认效果为swing，还可以使用linear效果;参数fn表示在动画完成时执行的函数。 下面通过代码演示show()、hide()和toggle()的简单使用。 <style> ```python div { width: 150px; hei
jQuery的动画的显示和隐藏特效
weixin_63719049的博客
03-22 1579
jQuery的动画的显示和隐藏特效 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #aa { width: 200px; height: 200px; background-color: red; } .abc { transform: rotat
jQuery动画的显示与隐藏效果
qinge_Crazy的博客
07-19 348
　　jQuery中用于控制元素显示和隐藏效果的方法如表1所示。 　　表1 控制元素的显示和隐藏 　　在表1中，参数speed表示动画的速度，可设置为动画时长的毫秒值(如1000)，或预定的3种速度(slow、fast和normal);参数easing表示切换效果，默认效果为swing，还可以使用linear效果;参数fn表示在动画完成时执行的函数。 　　下面通过代码演示show()、hide()和toggle()的简单使用。 　　<style> 　　div { width: 150p
JQuery操作div隐藏和显示的4种动画
热门推荐
projectNo的博客
10-25 2万+
不多说直接上代码，效果如下： <html> <head> <meta charset="utf-8"> <meta name="author" content="wg"> <title>Jquery-Div动画显示</title> <script src="jquery-1.10.2.min.js" type="text/ja
jQuery显示与隐藏动画
jwz934738949的博客
09-02 915
在jQuery中显示与隐藏动画有特定的方法。show与hide方法，show方法为显示动画，而hide方法为隐藏动画 show与hide有两个参数，第一个参数为动画显示与隐藏的时间，第二个参数为回调函数，当动画效果执行完毕之后，再执行。 使用toggle函数为切换动画，可以传入切换动画的时间，单位为毫秒 $("button").eq(0).click(function () { $("div").show(1400, function () { alert.
jQuery实现动画效果
06-07
举个例子：将一个 div 元素在显示和隐藏状态之间切换： ```javascript $("button").click(function(){ $("div").toggle(1000); }); ``` 以上是几个常用的 jQuery 动画效果，使用起来非常方便。当然，还有很多其他...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值