简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - jquery中delay函数不起作用
PHP中文网
PHP中文网 2017-04-11 12:46:11
0
4
536

想要实现的效果是，点击按钮后，逐步改变指定元素的属性。
使用了jquery的delay 延时方法，但是不起作用。
测试的失败的写法如下：

html部分不变

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
  <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

<title>jquery添加元素</title>

</head>
<style>
    p,h1,ul,li{padding:0; margin: 0;}
    p{width:300px; height: 500px; border: 1px solid #333; margin: 30px;float: left;}
    h1{font-size: 18px;background: #eee; padding:10px 0;color:#000;text-indent: 20px;border-bottom:1px solid #333; }
</style>
<body>
    <p>
    <h1>水果</h1>
    </p>

<button class="zhuangshi">标题装饰</button>

</body>
</html>

<script>
//失败方法一：
    $(document).ready(function(){
        $(".zhuangshi").click(function(){
          $("h1").append('<b>NEW</b>').delay(2000).css("background","green");


        });
 })
</script>


<script>
//失败方法二：
    $(document).ready(function(){
        $(".zhuangshi").click(function(){
             $("h1").append('<b>NEW</b>').delay(2000).animate({background:"green"});
        });
 })

</script>


<script>
//失败方法三：
    $(document).ready(function(){
        $(".zhuangshi").click(function(){
            $("h1").append('<b>NEW</b>').delay(2000,function(){
                $(this).css("background","green");
            });

        });
 })
</script>
PHP中文网
PHP中文网

认证0级讲师

全部回复(4)
PHPzhong
PHPzhong2017-04-11 12:48:11 4 楼

如果delay()下一项不是效果动画，则它不会被加入效果队列中，因此该函数不会对它进行延迟调用。

另外jQuery的animate不支持background-color的颜色渐变效果

点赞 +0
添加回复
巴扎黑
巴扎黑2017-04-11 12:48:11 3 楼

我觉得使用JS原生的setTimeout就可以了

点赞 +0
添加回复
巴扎黑
巴扎黑2017-04-11 12:48:11 2 楼

第一种/第三种不可行，delay后面的操作需要是一个异步的操作，所以直接设置css不可行。第三种方法delay包含两个参数，第一个是时间，第二个是规定队列的名称，所以你的用法是错误的。
第二种方法是可行的，但是jquery不支持background的animatie(详细介绍)，如果你换个属性，如'height'就能生效了。

点赞 +0
添加回复
洪涛
洪涛2017-04-11 12:48:11 1 楼

delay()这个函数是对应Animation动作的，因此不用乱用。

如果只是延时使用setTimeout即可；要是渐变，可使用css 3 的transition属性。

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！