Hola a todos. Llevo dándole vueltas a un tema de transiciones en CSS3 y no se me ocurre cómo solucionarlo. He creado el siguiente ejemplo de transiciones que funciona sólo en Chrome y en el iPad (no funciona en Firefox, Opera y por supuesto tampoco en IE):
http://www.soloproyectos.com/temp/test.php
Cuando pinchas en el link 'Play!', primero se mueve el cuadrado rojo y, tras una pausa de un segundo, se desplaza el cuadrado amarillo. El problema es que cuando le doy de nuevo a "Play!", debería realizar el mismo movimiento, pero al revés. Es decir, primero se debería desplazar el cuadrado amarillo hasta su posición inicial y, tras una pausa de un segundo, debería desplazarse el cuadrado rojo. Sin embargo no sucede así. Cómo podría solucionarlo? Gracias por vuestra ayuda. Aquí está el código:
Código HTML:
<style type="text/css">
div.square {
position: fixed;
background: yellow;
width: 320px;
height: 240px;
-webkit-transition: left 1s 1s;
}
div.square div.inner-square {
position: fixed;
left: 80px;
top: 60px;
background: red;
width: 160px;
height: 120px;
-webkit-transition: left 1s;
}
div.forward {
left: 860px;
}
div.forward div.inner-square {
left: 940px;
}
</style>
<script type="text/javascript">
$(function() {
var playLink = $('#play');
playLink.click(function() {
var square = $('.square');
if (square.hasClass('forward')) {
square.removeClass('forward');
} else {
square.addClass('forward');
}
this.blur();
return false;
});
});
</script>