基于jquery实现的文字淡入淡出效果

 更新时间:2013年11月14日 17:25:42   作者:  
这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js"> 
</script> 
<script language="javascript"> 
$(document).ready(function(){ 
    $("#btn1").toggle(function(){ 

            $("p").fadeOut("slow"); 
            },function(){ 
                $("p").fadeIn("slow");    

        }); 
        $("#btn2").toggle(function(){ 

            $("p").fadeTo("slow",0.66); 
            },function(){ 
                $("p").fadeTo("slow",0.66);  
        });  
    }); 

</script> 
</head> 

<body> 
<p style="background:#3F3">this is pi<br> 
this is pi<br> 
this is pi<br> 
this is pi<br> 
this is pi<br> 
this is pi<br> 
</p> 
<input type="button" value="淡入/淡出" id="btn1"> 
</body> 
<input type="button" value="淡入/淡出 效果 透明度0.66" id="btn2"> 
</html> 

相关文章

  • 浅谈ajax请求不同页面的微信JSSDK问题

    浅谈ajax请求不同页面的微信JSSDK问题

    下面小编就为大家分享一篇浅谈ajax请求不同页面的微信JSSDK问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • jquery 日期分离成年月日的代码

    jquery 日期分离成年月日的代码

    jquery 将日期分离成年月日的代码,需要的朋友可以参考下。
    2010-05-05
  • jquery插件jbox使用iframe关闭问题

    jquery插件jbox使用iframe关闭问题

    最近做需要用到弹出窗口,发现JBox不错,可以支持iframe,但是发现个问题,在iframe中添加一个按钮点击此按钮
    2009-02-02
  • jQuery中实现text()的方法

    jQuery中实现text()的方法

    这篇文章主要介绍了jQuery中实现text()的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • EASYUI TREEGRID异步加载数据实现方法

    EASYUI TREEGRID异步加载数据实现方法

    找了一下官方文档,看了EASYUI的异步加载,弄了我两三个小时,死活都不出数据
    2012-08-08
  • jQuery与vue实现拖动验证码功能

    jQuery与vue实现拖动验证码功能

    本篇文章主要给大家分享jQuery与vue分别实现超级简单的绿色拖动验证码功能以及代码实例,需要的朋友学习下吧。
    2018-01-01
  • 基于JQuery实现分隔条的功能

    基于JQuery实现分隔条的功能

    这篇文章主要介绍了基于JQuery实现分隔条的功能的相关资料,使用JQuery技术实现分隔条的功能,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • jQuery中height()方法用法实例

    jQuery中height()方法用法实例

    这篇文章主要介绍了jQuery中height()方法用法,以实例形式较为详细分析了height()方法返回元素高度的用法与相关注意事项,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery实现简单的计时器功能实例分析

    jQuery实现简单的计时器功能实例分析

    这篇文章主要介绍了jQuery实现简单的计时器功能,结合实例形式分析了jQuery实现倒计时60秒的具体操作技巧与相关注意事项,需要的朋友可以参考下
    2017-08-08
  • jQuery的几个我们必须了解的特点

    jQuery的几个我们必须了解的特点

    JQuery是一个快速的,简洁的JavaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
    2015-05-05

最新评论