想制作一个类似于子弹连续发射效果，可第二个开始移动时，第一个停了，请问有弄过这个的吗？

代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery.min.js"></script>
<title>13</title>
<style>
</style>
</head>
<body>
<input type="button" value="连续点击" id="btn1"/>
<script>
$("#btn1").click(f1)
function f1(){
$div=$("<div style='background:yellow; width:100px; height:100px;z-index:2;position:absolute; left:40px; top:40px';></div>")
$("body").append($div);
var haha=setInterval(move,10);
    function move(){
var curLeft=$div.css('left');
$div.css('left',parseInt(curLeft)+4+'px');
if(parseInt($div.css('left'))+130>document.documentElement.clientWidth){
clearInterval(haha);
$div.remove()
}
}
}
</script>
</body>
</html>   

解决方案 »

  1.   

    $div 前加了 var $("#btn1").click(f1);
    function f1(){
    var $div=$("<div style='background:yellow; width:100px; height:100px;z-index:2;position:absolute; left:40px; top:40px';></div>")
    $("body").append($div);
    var haha=setInterval(move,10);
     function move(){
    var curLeft=$div.css('left');
    $div.css('left',parseInt(curLeft)+4+'px');
    if(parseInt($div.css('left'))+130>document.documentElement.clientWidth){
    clearInterval(haha);
    $div.remove()
    }
    }
    }