Buenas ,aver si me podeis ayudar con un problema con el que me encuentro,

estoy realizando un juego web sencillo que consiste en que aparecen en unas posiciones topos y tienes que darles  antes de que desaparezcan para sumar puntos , el tipico de los recreativos ,no me viene el nombre a la cabeza ahora mismo xD

El problema me viene en la funcion que tengo para mostrar el div del topo, en la animacion slideDown cuando muestra el topo, deberia esperar ver si an pulsado click y si no an pulsado esconderse, y si an pulsado esconderse tambien, nose si me esplico pongo el codigo para lo que veais:

HTML

<div id="tablero">
<table border=1 id="tblPrp">
<tr>
	<td><div num="1" class="diglet" estado="no"></div></td>
	<td><div num="2" class="diglet" estado="no"></div></td>
	<td><div num="3" class="diglet" estado="no"></div></td>
</tr>
<tr >
	<td><div num="4" class="diglet" estado="no"></div</td>
	<td><div num="5" class="diglet" estado="no"></div></td>
	<td><div num="6" class="diglet" estado="no"></div></td>
</tr>
<tr >
	 <td><div num="7" class="diglet" estado="no"></div</td>
	<td><div num="8" class="diglet" estado="no"></div></td>
	<td> <div num="9" class="diglet" estado="no"></div</td>
</tr>
	</table>
</div>
 

.diglet{ width:180px;height:180px;position:relative;background:url('./images/diglet.png') no-repeat;background-size:60%;background-position: center;}
 

JQUERY

		function mostrarDig(x){
			sel=$('.diglet[num='+x+']');
			sel.slideDown(1000);
			sel.attr("estado","si");
			sel.click(function(){
				$(this).slideUp(200);
				$(this).attr("estado","no");
			});
			sel.slideUp(200);
}
 
 

Agradezco ayudas sugerencias y cualquier comentario, gracias

Efectivamente como dice EFEX lo mejor es hacerlo con un timer.. aunque yo optaría mas por setTimeout() antes que setInterval().

Tienes algunos divs que no están bien cerrados (linea 9,14,16). Puedes combinar varias acciones (jQuery) para intentar no utilizar tanto $(this). Ademas te recomiendo cambiar el estado antes de realizar el slideDown/slideUp para que no haya confusión.

var mostrarDig = function(x){
   var sel=$('.diglet[num='+x+']');
   sel.attr('estado','si').slideDown(1000);
   sel.on('click',function(){
     $(this).attr('estado','no').slideUp(200);
   });
   sel.slideUp(200);
}

Por cierto, le daria a los td el mismo tamaño que al div. Lo digo mas que nada porque si 3 de los div en una misma linea reciben slideUp, el TR se quedaría sin tamaño y se reduciría.

#tablero table tr td {width:180px; height:180px;}

Saludos

Up xD