<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
            padding: 20px;
            width: 400px;
            height: 400px;
            overflow: hidden;
            background-color: #ccc;
            overflow: hidden;
        #box img{
            width: 400px;

    <button id="btn01">down</button>
    <button id="btn02">up</button>
    <button id="btn03">stop</button>
    <button id="btn04">finish</button>
    <button id="btn05">delay</button>

    <div id="box">
        <img src="http://www.qiangssvip.com/usr/uploads/2019/05/281426999.jpg" alt="">

    <script src="../jqueryFile/jquery-3.4.1.js"></script>
        $(function (){
            $("#btn01").click(function (){
            $("#btn02").click(function (){
            $("#btn03").click(function (){
                $("#box").stop();   // 暂停动画
            $("#btn04").click(function (){
                $("#box").finish(); // 直接调到结束动画的状态
            var time = 0;
            $("#btn05").click(function (){
                var timer = setInterval(() => {
                    console.log( time++ );
                }, 1000);
                $("#box").hide(2000).delay(3000).show(2000); // 延迟动画的执行


Last modification:July 9th, 2019 at 05:31 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment