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

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

 

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

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

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

 

<!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{

         border2px solid;

         text-aligncenter;

         font-weightbold;

         cursorhand;

      }

      .b{

         background-color#F00;

         color#FFF;

         text-aligncenter;

         font-weightbold;

         cursorhand;

      }

    </style>

  </head>

  <body>

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

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

  </body>

</html>

你可能感兴趣的:(jquery)