zoukankan      html  css  js  c++  java
  • jqury如何一次性实现连贯的一系列不同动作?

    1.用animate();动画队列;

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        var div=$("div");
        div.animate({height:'300px',opacity:'0.4'},"slow");//动作1
        div.animate({'300px',opacity:'0.8'},"slow");//动作2
        div.animate({height:'100px',opacity:'0.4'},"slow");//动作3
        div.animate({'100px',opacity:'0.8'},"slow");//动作4
      });//执行动作的先后顺序按照从上往下的规律
    });
    </script>
    </head>
     
    <body>
    <button>开始动画</button>
    <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
    如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;100px;position:absolute;">
    </div>
    </body>
    </html>

    2.用jquery中的链;

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function()
      {
      $("button").click(function(){
        $("#p1").css("color","red")
          .slideUp(2000)
          .slideDown(2000);//执行的顺序按照点之前到点之后
      });
    });
    </script>
    </head>
    <body>
    
    <p id="p1">菜鸟教程!!</p>
    <button>点我</button>
    
    </body>
    </html>
  • 相关阅读:
    css预编译器stylus
    使用element的upload组件实现上传图片功能
    《百年孤独读后感》
    socket_server
    socket-client
    面向对象基础-初步介绍
    re正则表达式
    实战2-计算器:输入这段公式("1
    python-常用模块
    实战-ATM+购物车项目软件目录规范
  • 原文地址:https://www.cnblogs.com/lxl87/p/8321946.html
Copyright © 2011-2022 走看看