注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

IOS & JAVA KEY

(iMilo)

 
 
 

日志

 
 
关于我

All the splendor in the world is not worth a good friend!! Hello my friend!!

网易考拉推荐

以滑动效果来替换文本--jQuery事件处理  

2011-02-13 14:01:47|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

2011-02-05

l  以滑动效果来替换文本

知识点:

请以一段文本替换另一段文本,使被取代文本慢慢变得不可见,与此同时,另一段文本渐渐显示出来。

说明:

slidDown()方法:通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

slideUp()方法:通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

.addClass(‘someClass’)方法:为指定元素添加someClass样式。

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>jQuery事件处理--以滑动效果来替换文本</title>

    <script type="text/javascript" src="rs/js/jquery.js"></script>

    <script type="text/javascript">

    <!--

    $(

    function()

    {

         $('#ia').addClass('a').hide();

         $('#ib').addClass('b');

         $('p').click(

             function(event)

             {

                 var tg = $(event.target);

                 $(this).slideUp('slow');

                 if(tg.is('#ia'))

                     $('#ib').slideDown('slow');

                 if(tg.is('#ib'))

                     $('#ia').slideDown('slow');

             }

         );

    }

    );

    //-->

    </script>

    <style type="text/css">

      .a{

         border: 2px solid;

         text-align: center;

         font-weight: bold;

         cursor: hand;

      }

      .b{

         background-color: #F00;

         color: #FFF;

         text-align: center;

         font-weight: bold;

         cursor: hand;

      }

    </style>

  </head>

  <body>

    <p id="ia">JQUERY IS AN OPEN SOURCE PROJECT!</p>

    <p id="ib">MANIPULATIONG DOM USING JQUERY!</p>

  </body>

</html>

  评论这张
 
阅读(815)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017