想要实现的效果是，点击按钮后，逐步改变指定元素的属性。
使用了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>
PHPz2017-04-11 12:48:11
如果delay()下一项不是效果动画，则它不会被加入效果队列中，因此该函数不会对它进行延迟调用。
另外jQuery的animate不支持background-color的颜色渐变效果
巴扎黑2017-04-11 12:48:11
第一种/第三种不可行，delay后面的操作需要是一个异步的操作，所以直接设置css不可行。第三种方法delay包含两个参数，第一个是时间，第二个是规定队列的名称，所以你的用法是错误的。
第二种方法是可行的，但是jquery不支持background的animatie(详细介绍)，如果你换个属性，如'height'就能生效了。
PHP中文网2017-04-11 12:48:11
delay()这个函数是对应Animation动作的，因此不用乱用。
如果只是延时使用setTimeout即可；要是渐变，可使用css 3 的transition属性。