JQuery—简单动画效果

 一,JQuery实现隐藏显示的功能:

1jQuery hide() 和 show()

    通过 jQuery,您可以使用hide() 和 show() 方法来隐藏和显示 HTML 元素:

2jQuery toggle()

    通过 jQuery,您可以使用toggle() 方法来切换 hide() 和 show() 方法。

3,语法:

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

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

$(selector).toggle(speed,callback);

 

可选的speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的callback 参数是隐藏或显示完成后所执行的函数名称。

例子:

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
  5.         <script type="text/javascript">  
  6.             $(document).ready(function(){  
  7.                   $("button").click(function(){  
  8.                       $("p").toggle(1000);  
  9.                   });  
  10.             });  
  11.         </script>  
  12.     </head>  
  13.     <body>  
  14.         <button type="button">切换</button>  
  15.         <p>这是一个段落。</p>  
  16.         <p>这是另一个段落。</p>  
  17.     </body>  
  18. </html>  

二,淡入淡出动画效果功能:

方法名

含义

语法

fadeIn()

 

用于淡入已隐藏的元素

$(selector).fadeIn(speed,callback);

 

fadeout()

用于淡出可见元素

$(selector).fadeOut(speed,callback);

fadeToggle()

可以在 fadeIn() 与 fadeOut() 方法之间进行切换 ,和上边的toggle功能一样

 

$(selector).fadeToggle(speed,callback);

fadeTo()

允许渐变为给定的不透明度(值介于 0 与 1 之间)。

$(selector).fadeTo(speed,opacity,callback);
其中:opacity为不透明度的参数(0——1之间)

例子:


  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <script src="/jquery/jquery.js"></script>  
  5.         <script>  
  6.             $(document).ready(function(){  
  7.                   $("button").click(function(){  
  8.                     $("#div1").fadeTo("slow",0.15);  
  9.                     $("#div2").fadeTo("slow",0.4);  
  10.                     $("#div3").fadeTo("slow",0.7);  
  11.                   });  
  12.             });  
  13.         </script>  
  14.     </head>  
  15.       
  16.     <body>  
  17.         <p>演示带有不同参数的 fadeTo() 方法。</p>  
  18.         <button>点击这里,使三个矩形淡出</button>  
  19.         <br><br>  
  20.         <div id="div1" style="width:80px;height:80px;background-color:red;"></div>  
  21.         <br>  
  22.         <div id="div2" style="width:80px;height:80px;background-color:green;"></div>  
  23.         <br>  
  24.         <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
  25.     </body>  
  26. </html>  

三,滑动效果的功能

方法名

含义

语法

slideDown

 

用于向下滑动元素

$(selector).slideDown(speed,callback);

slideUp

用于向上滑动元素

同上

slideToggle

如果元素向下滑动,则 slideToggle() 可向上滑动它们。

如果元素向上滑动,则 slideToggle() 可向下滑动它们。

同上


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值