A few questions from a JS writer confused with Jquery
So, I've already learned JS a year ago, now I was rather rusty on the language, but I wanted to try the jQuery library for personal projects.
Anyways, I'm making a reversi game, up till now, I've made a grid, put the basic layout and it works, now I've been passing an onclick function containing a simple line of jQuery code:
-
/*
*Add a dot event based on the X, Y axis. Supply color, either 'b' or 'w'.
*/
function dotIt(x, y, color){
jQuery('div:contains("'+x+','+y+'")').append('<img id="theImg" src="images/'+color+'.png" />').animate({
"opacity": "show"
}, "slow", "easeInQuad");
}
The function does place the image inside the DIV, all is well, but the animation isn't launched. I need something like, on the click of the mouse, a dot will slowly fade in to the grid. For some reason this isn't working.
Here's one line of the grid:
-
<tr>
<td class="bgGrid" onclick="dotIt(0,0,'b');">
<div>
<span class="invTxT">0,0</span>
</div>
</td>
<td class="bgGrid" onclick="dotIt(0,1,'b');">
</td>
<td class="bgGrid" onclick="dotIt(0,2,'b');">
<div>
<span class="invTxT">0,2</span>
<img id="theImg" src="images/b.png"/> //<-- This is after a click, the image is indeed appended to the DIV but no animation is going on.
</div>
</td>
<td class="bgGrid" onclick="dotIt(0,3,'b');">
<div>
<span class="invTxT">0,3</span>
</div>
</td>
<td class="bgGrid" onclick="dotIt(0,4,'b');">
</td>
<td class="bgGrid" onclick="dotIt(0,5,'b');">
Also, I have another question, I'm wondering how I could possibly replace an image that's within a div with a new one.
Thanks.