主页 > 程序开发 > JS特效 > jq动画渐隐渐显

jq动画渐隐渐显

更新时间:2015-09-11 22:16  来源:电脑技术网  作者:电脑技术网  查看评论
文章目录索引
文章简介
jq动画渐隐渐显代码
jq动画渐隐渐显代码说明

文章简介

jq动画渐隐渐显代码,本文使用的是jquery中的fadeOut和fadeIn方法来实现有关jq动画渐隐渐显代码的。

jq动画渐隐渐显代码

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>jq动画渐隐渐显</title> 
  6. <script src="http://www.pc515.com/js/public.js"></script> 
  7. </head> 
  8. <body> 
  9. <p id="pc515" style="height:500px;width:500px;background:#000"><a id="pc515a" style=" color:#FFF">AAA</a></p> 
  10. </body> 
  11. </html> 
  12. <script> 
  13. $("#pc515a").click(function(){ 
  14.     $("#pc515").fadeOut(500); 
  15.     $("#pc515").delay(10000).fadeIn(500); 
  16. }); 
  17. </script> 

jq动画渐隐渐显代码说明

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>jq动画渐隐渐显</title> 
  6. <script src="http://www.pc515.com/js/public.js"></script> 
  7. </head> 
  8. <body> 
  9. <p id="pc515" style="height:500px;width:500px;background:#000"><a id="pc515a" style=" color:#FFF">AAA</a></p> 
  10. </body> 
  11. </html> 
  12. <script> 
  13. $("#pc515a").click(function(){//点击ID为AAA时执行代码。
  14.     $("#pc515").fadeOut(500); //渐隐藏,渐变时间为500毫秒
  15.     $("#pc515").delay(10000).fadeIn(500); //十秒后渐显示,渐显示为500毫秒
  16. }); 
  17. </script> 

有关jq | 的文章推荐