自己写了个小动画,注释掉的部分是第二种方法,没延迟
怎么下面这种动画有延迟,请大师们帮帮忙
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>test</title>
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<style>
.main{width: 1024px;margin: 0 auto}
.bar{width: 300px;height: 300px;background: blue;position: relative;}
.bar button{position: absolute;bottom: 10px;right: 20px;}
</style>
<body>
<div class="main">
<div class="bar"><button class="go">go</button></div>
</div>
<script>
var item=$('.bar button');
var t;
$('.bar').hover(function() {
t=setInterval("go()",800);
}, function() {
clearInterval(t);
});
function go(){
item.animate({right: 50},400, function(){
item.animate({right:20}, 400)
});
}
// $('.bar').hover(function() {
// go(item)
// }, function() {
// clearInterval(t)
// });
// function go(i){
// i.animate({right: 50},400, function() {
// i.animate({right:20}, 400)
// });
// t=setInterval(function(){
// i.animate({right: 50},400, function() {
// i.animate({right:20}, 400)
// });
// },800)
// }
</script>
</body>
</html>
是不是写反了?我试验的结果是第一种有延迟第二种没有。
第一种延迟的原因是
至少800毫秒以后才会执行动画函数