JQuery 使用.show()和.hide()做的可爱动画

只是最基本的东西，没啥稀奇的，只是今天看jquery教程的时候偶然看到show()和hide()是可以写两个参数的，

第一个参数是元素隐藏/显示的速度(单位：毫秒)，另一个是一个function类型。

例子如下，消失时会同时向上向左移动并且字体颜色逐渐淡化，元素还会还一直抖动，显示时相反，这种渐变效果挺可爱的。

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript"  src="jquery-1.7.1.min.js"></script>

  
 </head>

 <body>
          <div>
            <h4>我喜欢吃的水果</h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    //第一种写法
                    if ($("#hidval").val() == 0) {
                            $("ul").hide(3000,function()
                        {
                            $("#hidval").val(1);
                        });
                    } else {
                        $("ul").show(3000,function(){
                            $("#hidval").val(0);
                        });
                    }
                    //第二种写法
                    //$("ul").toggle(3000);
                })
            });
        </script>
 </body>
</html>

 

posted @ 2016-03-11 14:55  已注销1  阅读(1174)  评论(0)    收藏  举报