想要实现的效果是,点击按钮后,逐步改变指定元素的属性。
使用了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>
div,h1,ul,li{padding:0; margin: 0;}
div{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>
<div>
<h1>水果</h1>
</div>
<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>
如果delay()下一项不是效果动画,则它不会被加入效果队列中,因此该函数不会对它进行延迟调用。
另外jQuery的animate不支持background-color的颜色渐变效果