[ jquery 效果 delay(duration,[queueName]) ] 此方法用于对队列中的下一项的执行设置延迟

此方法用于对队列中的下一项的执行设置延迟

实例:

<!DOCTYPE html>
<html lang='zh-cn'>
<head>
<title>Insert you title</title>
<meta http-equiv='description' content=''.animation' is my page'>
<meta http-equiv='keywords' content='keyword1,keyword2,keyword3'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
<style type="text/css">
    *{margin:0;padding:0;}
    html{font:400 13px/1.2em 'Courier New';color:#000;}
    .animation{width:100px;height:100px;background:red;border-radius:2px;text-align:center;line-height:100px;color:#FFF;}
    button{background:#FF9E6B;padding:8px 16px;border:0;outline:none;-webkit-outline:none;margin-bottom:15px;font:400 13px/1.2em 'Courier New';color:#FFF;border-radius:2px;}
</style>
<script type='text/javascript'>
    $(function(){
        $('.start').click(function(){
            $('.animation').animate({'width':'100px','height':'100px',},0,'linear');
            $('.animation').delay(1800).animate({'width':'150px',},1500,'linear');
            $('.animation').delay(3200).animate({'height':'150px',},1500,'linear');
            $('.animation').animate({'width':'450px','height':'300px',},1500,'linear');
        });
        $('.stop').click(function(){
            $('.animation').stop(true,true);
        });
    });
</script>
</head>
<body>
    <button class='start'>start</button>
    <button class='stop'>stop</button>
    <div class='animation'>stop()及参数</div>
</body>
</html>

 

posted @ 2016-06-27 20:12  窗棂  Views(132)  Comments(0Edit  收藏  举报