title: Board game in javascript, sync questions card
body: <p>I'm developing a board game in javascript and I'm almost solved all conditionals and iterations but I still have one problem: it's a game in which you roll the dice and then your pawn moves, and when your pawn reaches certain place on the board, it's supposed to show up a card with questions.
  That card is actually a html div, and I just hide and show it by using a .css file.
  The thing is, it's "firing" just after I roll the dice, and I can't figure out how to syncronize it with the pawn movements, in order to make it show up when the pawn actually reaches that board section.
  The pawn is just an image, and I'm "calling" it using jQuery like this: $("#bluePawn") and then I use an animate function in javascript to make it "move" over the board.
  That function receives 4 parameters, which are: the DOM object to move (the pawn as I've referred to before), the pawn's current position on the board, how many spaces to move, and a true/false flag.
  I hope this can be more illustrative if I show you the piece of code that issues the movement.</p>
  
  <p>The places where the pawns can be placed and over which they can move, are "marked" on the board with pixel coordinates, included in an associative array</p>
  
  <p>I tried to include an example code but wasn't able to indent it properly.</p>