link jsfiddle: http://jsfiddle.net/jbirdwell/yemat/1/
html:
<!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:
var ball = 11; $(document).ready(function() { $('#ball').click(function(){ $(this).fadeout(); ball -= 1; if(ball === 0){ $('#champion').css("display",'inline-block'); } }); }); css:
#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 couple of questions.
how continue let #ball faded out until gone?
how can multiple basketball instead of having put every time want ball?
change id class. it's not working correctly because can have 1 id @ time. here live example: http://jsfiddle.net/qh7st/2/
$('.ball').click(function() <div class="ball"></div> i'm not sure if understand second question. mean how dynamically add balls instead of hardcoding it?
Comments
Post a Comment