随笔 - 30  文章 - 2  评论 - 8  阅读 - 19149 

实例中涉及到使用动画方法animate,动画停止方法Stop,

其中如果不是使用animate创建动画,使用stop方法无法停止队列中创建的动画。

其他详情在示例代码中都有注释。

复制代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动画效果</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#begin").click(function () {
            for (var i = 0; i < 5; i++) {
                $("div").animate({
                    left: '250px',
                    opacity: '0.5',//透明度
                    height: '150px',
                    width: '150px'
                }, 'slow');
                $("#sec").show('slow');
                $("div").animate({
                    left: '0px',
                    opacity: '1',
                    height: '100px',
                    width: '100px'
                }, 'slow');
                $("#sec").hide('slow');
            }
            
        });
        //停止当前动画,跳入下一个动画
        $("#stop").click(function () {
            $("div").stop();
        })
        //停止所有动画,保持当前状态
        $("#stop1").click(function () {
            $("div").stop(true,false);
        })
        //停止所有动画,跳到当前动画终点
        $("#stop2").click(function () {
            $("div").stop(true, true);
        })
        /*
        $(selector).stop(stopAll,goToEnd);
        可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
        可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
        因此,默认地,stop() 会清除在被选元素上指定的当前动画。
        下面的例子演示 stop() 方法,不带参数:
        实例
        */
    });
</script> 
</head>
 
<body>

<button id="begin">开始动画</button> <button id="stop">停止当前动画,进入下一个动画</button>
    <button id="stop1">瞬间停止</button><button id="stop2">停止所有动画,跳到当前动画终点</button>
<p><a href="http://4welove.taobao.com">手机话费、Q币、游戏充值啊。。。老婆要求加的,无语中....</a></p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    <p id="sec" style="display:none;"><a href="http://4welove.taobao.com">老婆要求加的,无语中....</a></p>
</div>

</body>
</html>
复制代码

 

 

 

posted on   Johnliu  阅读(250)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示