javascript - jquery中delay函数不起作用
想要实现的效果是，点击按钮后，逐步改变指定元素的属性。
使用了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>
