为了账号安全,请及时绑定邮箱和手机立即绑定

按下“延时”按钮时动画并没有立刻停止,而是执行完水平移动以后再暂停设定时间,大家是这样吗?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>调用delay()方法延时执行动画效果</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <h3>调用delay()方法延时执行动画效果</h3>
        <span></span>
        <input id="btnStop" type="button" value="延时" />
        <div id="tip"></div>
        
        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "+=100px" 
                }, 3000, function () {
                    $(this).animate({
                        height: '+=60px',
                        width: '+=60px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });   
                }); 
                $("#btnStop").bind("click", function () {
                    $("span").delay(2000);
                    $("#tip").html("正在延时!");
                });
            });
        </script>
    </body>
</html>

代码如上

正在回答

3 回答

没问题啊,这个动画分两段,一段是平移,一段是放大,这里delay不是让动画停止啦,是让第二段动画在你点击按钮之后延迟2秒再发生

0 回复 有任何疑惑可以回复我~
#1

Acelit 提问者

嗯嗯,我也观察到了,也就是所delay()只是对分段显示的动画有效是吧?而且也不是实时delay...
2016-01-03 回复 有任何疑惑可以回复我~
#2

迷途的马尔斯 回复 Acelit 提问者

不会啊,delay可以延迟所有的动画,单个也可以延迟;JS是单线程的嘛,肯定是先执行完动画再延迟的
2016-01-03 回复 有任何疑惑可以回复我~
#3

Acelit 提问者 回复 迷途的马尔斯

嗯,理解了你的意思,多谢!
2016-01-03 回复 有任何疑惑可以回复我~

延迟时间设计的过长,也会出现问题?

0 回复 有任何疑惑可以回复我~

并且,当第二段动画还没有执行完毕的时候,div就显示了:执行完成!这是为什么?还是说,这句话没有受延迟影响,还是在3s后执行?

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
jQuery基础课程
  • 参与学习       154768    人
  • 解答问题       7184    个

加入课程学习,有效提高前端开发速度

进入课程

按下“延时”按钮时动画并没有立刻停止,而是执行完水平移动以后再暂停设定时间,大家是这样吗?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信