实现动画的停止功能

来源：互联网发布：c语言实现五子棋编辑：程序博客网时间：2024/06/09 22:50

本安全是实现动画的一个停止功能，我们的动画停止方法stop()，里面可以没有参数，也可以有参数，也就是说我们动画有3种停止状态，采用的方法就是”对象.stop()”。而且还能设置停止的参数,比如一个图案上面有三个动画效果，stop()只会停止第一个动画，其它不停止；stop(true)停止图案上所有动画；stop(true,true)停止动画，直接跳到第一个动画的最终状态。如有不当之处，敬请指教。初学案例

<head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <style>        div {            width: 200px;            height: 100px;            background-color: yellow;            color: red;            text-align: center;            line-height: 100px;        }        a {            display: block        }    </style>    <script src="js/jquery-1.8.3.js"></script>    <script type="text/javascript">        $(document).ready(function() {            //点击执行动画            $("#start").click(function() {                $("#one").animate({                    height: 300                }, 5000)                $("#one").animate({                    width: 300                }, 5000)                $("#one").animate({                    opacity: 0.6                }, 2000)            })            $("#stop").click(function() {                var v = $("#animation").val();                var $one = $("#one");                if(v == "1") {                    //当前当前动画                    $one.stop()                } else if(v == "2") {                    //停止所以队列                    $one.stop(true)                } else if(v == "3") {                    //停止动画，直接跳到当前动画的结束                    $one.stop(true, true)                }            });        });    </script></head><body>    <div id="one">我是一个动画</div>    <input id="start" type="button" value="执行动画"><br /><br /> 点击观察动画效果：    <select id="animation">        <option value="1">stop()</option>        <option value="2">stop(true)</option>        <option value="3">stop(true,true)</option>    </select>    <a></a>    <input id="stop" type="button" value="停止动画"></body>

效果图如下：
这里写图片描述

阅读全文

0 0