zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    MySQL 之 创建千万数据测试
    MySQL中的各种引擎
    MySQL 之【约束】【数据库设计】
    MySQL 的增删改查
    SQL数据类型
    SQL 数据类型
    数据库
    摘要算法
    Python 标准库-json
    Python 标准库-sys
  • 原文地址:https://www.cnblogs.com/xcxcxcxc/p/5541148.html
Copyright © 2011-2022 走看看