zoukankan      html  css  js  c++  java
  • animate动画

    <!DOCTYPE html>
    <html>

    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
        .left div,
        .right div {
            100px;
            height: 50px;
            padding: 5px;
            margin: 5px;
            float: left;
            border: 1px solid #ccc;
        
        }
        .left div {
            background: #bbffaa;
        }
       
        .right div {
            background: yellow;
        }
        </style>
        <script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-

    1.9.1.min.js"></script>
    </head>

    <body>
        <h2>slideDown</h2>
        <div class="left">
            <h4>测试一</h4>
            <div class="a" id="a1">hide-show</div>
          <select id="cs" >
           <option value="1">向下</option>
            <option value="2">向右</option>
            <option value="3">淡出</option>
            <option value="4">淡入</option>
          </select>
         <button class="qd">确定</button>
        </div>
        <div class="right">
            <h4>测试二</h4>
            <div class="b" id="a2">hide-show</div>
            <button>点击slideDown执行回调</button>
        </div>
            <script type="text/javascript">
              $(".qd").click(function(){
                 var v =$("#cs").val()
                 if(v == "1"){$(".a").animate({height:300},3000)}
                 else if(v == "2"){$(".a").animate({500},3000)}
                 else if(v == "3"){$(".a").animate({opacity:0.2},3000)}
                 else if(v == "4"){$(".a").animate({opacity:1},3000)}
              })
             
            
            </script>
    </body>


    </html>

    红尘往事,一切随风!
  • 相关阅读:
    create-react-app
    简单的PHP的任务队列
    Yii框架中使用PHPExcel导出Excel文件
    Android 使用全局变量的问题
    Android 退出整个应用程序
    new DialogInterface.OnClickListener()报错的解决办法
    Yii 日期时间过滤列 filter
    Yii 时间戳格式化显示的问题
    PullToRefreshListView 应用讲解
    Android:Layout_weight的深刻理解
  • 原文地址:https://www.cnblogs.com/xwenwu/p/13629992.html
Copyright © 2011-2022 走看看