jQuery淡入淡出效果代码

发布时间:2019-09-21编辑:脚本学堂
本文介绍了jquery淡入淡出效果的一例代码,有关jquery 淡入淡出的实现方法,有需要的朋友参考下。

例子,jquery 淡入淡出效果。
 

复制代码 代码示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
  <script src="http://code.jquery.com/jquery-latest.js"></script> 
  <script>
  //jquery 淡入淡出效果
  $(document).ready(function(){ 
    $("button").click(function () { 
      if($(this).html() == "Hide"){ 
        $(this).html("Show"); 
        $("p").show(600); 
      } else { 
        $(this).html("Hide"); 
        $("p").hide(600); 
      } 
    });     
  }); 
  </script> 
  <style> 
  p { background:#dad; font-weight:bold; } 
  </style> 
</head> 
<body> 
  <button align="right">Hide</button> 
  <p style="display: none;">Hiya</p> 
  <p style="display: none;">Such interesting text, eh?</p> 
</body> 
</html>