zoukankan      html  css  js  c++  java
  • jquery自定义动画

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                #box{
                    width: 200px;
                    height: 200px;
                    background-color: pink;
                }
            </style>
        </head>
        <body>
            <button id="kaishi">开始</button>
            <button id="jieshu">结束</button>
            <div id="box"></div>
        </body>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function(){
                // $('button').click(function(){
                //     $('#box').animate({"marginLeft":1000},2000,function(){
                //         $(this).animate({'marginTop':200},500)
                //     })
                // })
                $('#kaishi').click(function(){
                    $('#box').animate({"marginLeft":1000},2000)
                    $('#box').animate({'marginTop':200},500)
                    $('#box').delay(3000).animate({'marginLeft':0},1000)    //delay(3000)延迟,隔多少秒后执行
                })
                $('#jieshu').click(function(){
                    // $('#box').stop(true)    //清空动画队列
                    // $('#box').stop()    //结束,默认为false
                    // $('#box').stop(true,true)    //完成当前动画,把后面动画清空
                    $('#box').stop(false,true)    //当前动画到最后一个状态,继续执行下面所有动画
                })
            })
        </script>
    </html>
  • 相关阅读:
    python字典实现原理-哈希函数-解决哈希冲突方法
    ElasticSearch-倒排索引
    ElasticSearch-核心概念
    MarkdownPad2基础语法
    下载python3.6,进行编译安装,运行django程序
    linux-指令1
    注解和反射
    Htlm和Css
    JAVASE加强
    网络编程
  • 原文地址:https://www.cnblogs.com/yueranran/p/12889564.html
Copyright © 2011-2022 走看看