Find the JSFiddle link here: http://jsfiddle.net/jbirdwell/YEmat/1/
The HTML structure:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src='script.js'></script>
<title></title>
</head>
<body>
<table>
<tr>
<td>
<img src = "http://www.nba.com/media/playerfile/thunder_logo.gif"/><img id="champion" src="http://farm5.staticflickr.com/4018/4624684843_1630196e78.jpg"/><div id="ball"></div> <div id="ball"></div> <div id="ball"></div> <div id="ball"></div> <div id="ball"></div> <div id="ball"></div> <div id="ball"></div> <div id="ball"></div> <div id="ball"></div> <div id="ball"></div> <div id="ball"></div>
</td>
</tr>
</table>
</body>
</html>
JavaScript functionalities:
var ball = 11;
$(document).ready(function() {
$('#ball').click(function(){
$(this).fadeOut();
ball -= 1;
if(ball === 0){
$('#champion').css("display",'inline-block');
}
});
});
Customized CSS properties:
#ball{
background-color: orange;
height: 30px;
width: 30px;
border-radius: 100%;
border: 1px solid #FF8A21;
display: inline-block;
}
#champion{
display: none;
width: 45px;
}
I have some queries regarding this code.
How can I make sure that all the #ball elements fade out until they are completely gone?
Is there a way to replicate the basketball instead of manually adding each one?