Cómo eliminar el estado de suspensión cuando el elemento se mueve

Tengo este ejemplo:

http://jsfiddle.net/VKwjD/20/

si pasas el mismo cuadrado, su color cambia; si hace clic, el tamaño principal cambia para que se mueva el cuadrado.

Mi problema es: si no mueves el mouse después del clic, el cuadrado permanece en el estado de desplazamiento … ¿Por qué? Es posible eliminar este estado después del clic? sin mover el mouse …

Gracias por tu ayuda

HTML:

 

CSS:

 .container { background: #FF0000; width: 200px; height: 200px; position: relative; } .container.hide { width: 50px; } .bp { background: #00FFFF; width: 30px; height:30px; top:0px; right:0px; position:absolute; cursor: pointer; } .bp:hover{ background: #0000FF!important; } 

JavaScript:

 $(document).ready(function() { $('.bp').click(function() { if($('.container').hasClass('hide')) { $('.container').removeClass('hide'); var l1 = document.getElementById('bp'); l1.style.background = '#00FFFF'; } else { $('.container').addClass('hide'); var l1 = document.getElementById('bp'); l1.style.background = '#0000FF'; } }); });