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

Posted 窗棂博客记录

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[ 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>

 

以上是关于[ jquery 效果 delay(duration,[queueName]) ] 此方法用于对队列中的下一项的执行设置延迟的主要内容,如果未能解决你的问题,请参考以下文章

多个 jquery 效果在特定时间多次

如何使用jQuery创建左右滑动效果?

如何在 CSS 中转换 jQuery 淡入淡出效果?

jQuery 效果方法

jQuery的效果函数

jquery实现图片漂浮效果