hide on click and again loop of image continues

by Chandana Thota

HTML

<!-- hide on click and again loop of image continues -->
<div id="cloud">
<div id="a1" value="100"></div>
 
<div style="position:fixed;top:10px;right:10px;">
<span>Score: </span>
<span id="score">0</span>
</div>
</div>

CSS

#a1{
    position:absolute;
	height:80px;
    width:140px;
background:url('http://www.wilsoninfo.com/butterfly/1-animated-butterfly-2.gif');
    top:420px;
}

#score{
font-color:red;
}
#cloud{
 height:600px;
width:600px;    background:url('http://th02.deviantart.net/fs70/PRE/i/2012/166/6/7/clouds_background_by_taylordylan-d53jwph.jpg')   
}

JavaScript

var pos = $('#a1').position().left;
function loop() {
 //moving first div from left to right 
    $('#a1').show();
	$('#a1').css({top:400}); 
    $( "#a1" ).animate({ "top": "-=500" }, 7000 , 'linear',
                        function() {loop();
        })
}
    loop();



$('#a1').click(function(){
				$(this).hide();
    $('#score').text("10");
});