Mudar cor ao clicar na div, como?

[MBarros 0]

Pessoal,

 

Consegui fazer com que ao clicar em uma div, ela, que possui uma cor X ao "sofrer" o clique, fique com uma cor Y. Minha dúvida é: como faço para que, ao clicar fora da div ou clicar nela mesma, a DIV retorne a cor X?

 

Exemplo:

 

Tenho uma DIV na cor cinza. Ao clicar nela, ela se adquire a cor vermelha. Ao clicar fora da DIV ou dentro dela novamente, torna-se cinza novamente. Como fazer isso?

 

Obtive êxito na primeira etapa:

 

$("#box").click(function(){
 $(this).stop().animate({ backgroundColor: "#ff0000" }, 500);
});

 

Essa transição entre cores que estou procurando fazer, funciona perfeitamente com HOVER:

 

$("#box").hover(function(){
 $(this).stop().animate({ backgroundColor: "#ff0000" }, 500);
},function(){
 $(this).stop().animate({ backgroundColor: "#ddd" }, 500);
});

 

Mas como aplicar a técnica hover ao .click?

 

:)

[William Bruno 1501]

antes de trocar a cor dela, salve a cor anterior numa variavel de escopo global, ou privada caso esteja trabalhando com objetos.

 

e então, qndo for trocar, você testa qual é a cor atual. Basta colocar a que não estiver naquele momento.

 

para o 'clicar' fora, você terá que executar em outro evento de outro elemento(pode ser até o body), a rotina que atribui a cor inicial.

como detalhe, veja o atributo .target, do objeto event, você vai precisar dele na segunda parte.