philippbosch/test.css

## test.css
#go {
	position:absolute;
	top:160px;
	left:150px;
	-webkit-transform: scale(1);
}
#go.scale{
	-webkit-transform: scale(0);
}


#again {
	position:absolute;
	top:160px;
	left:850px;
	-webkit-transform: scale(0);
}
#again.scale{
	-webkit-transform: scale(1);
}


#back {
	position:absolute;
	top:120px;
	left:650px;
	-webkit-transform: scale(0);
}
#back.scale{
	-webkit-transform: scale(1);
}


/* Hier sind jetzt alle Transition-Eigenschaften von #go, #again und #back zu einem Block zusammen gefasst */
.transitions #go, .transitions #again, .transitions #back {
	-webkit-transition-delay: 0s;
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 1s;
	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-delay: 0s;
}


#bubble-rot {
	position:absolute;
	top:30px;
	left:20px;
}
#bubble-blau {
	position:absolute;
	top:90px;
	left:20px;
}
#bubble-rot.to-the-right, #bubble-blau.to-the-right {
	-webkit-transform: translate(500px,0);
}

.transitions #bubble-rot, .transitions #bubble-blau {
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 1s;
	-webkit-transition-delay: 0s;
	-webkit-transition-timing-function: ease-in-out;
}
/* Die abweichende Eigenschaft transition-delay der blauen Bubble wird hier explizit überschrieben */
.transitions #bubble-blau{
	-webkit-transition-delay: 0.5s;
}

## test.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="jqtouch/jqtouch.css">
        <link rel="stylesheet" type="text/css" href="test.css">
        <script src="jqtouch/jquery.js"></script>
        <script src="jqtouch/jqtouch.js"></script>
        <script src="test.js"></script>
    </head>
    <body>
        <div id="home" class="current transitions">
            <div>
                <img src="go2.png" id="go">
                <img src="again1.png" id="again">
                <img src="bubble-rot.png" id="bubble-rot">
                <img src="bubble-blau.png" id="bubble-blau">
                <img src="back.png" id="back">
            </div>
        </div>
    </body>
</html>

## test.js
var jQT = $.jQTouch();

$(document).ready(function() {
    $('#go').tap(function() {
        $('#go,#again,#back').addClass('scale');
        $('#bubble-rot,#bubble-blau').addClass('to-the-right');
    });

    $('#again').tap(function() {
        /* Wir deaktivieren erstmal alle Transitions, … */
        $('#home').removeClass('transitions');
        /* … nehmen dann den beiden Bubbles die Klasse to-the-right weg, was ohne Transition passiert, da die ja deaktiviert sind, … */
        $('#bubble-rot,#bubble-blau').removeClass('to-the-right');
        /* … und wir nehmen #back und #again die Klasse scale weg – auch ohne Transition – damit haben wir die Ausgangslage wieder hergestellt. */
        $('#back,#again').removeClass('scale');

        /* Jetzt müssten wir einfach nur noch die Transitions wieder aktivieren und die Klassen wieder hinzufügen. Das klappt aber nicht, weil das Deaktivieren der Transitions offensichtlich länger dauert als das Hinzufügen der Klasse to-the-right. Auf jeden Fall müssen wir uns hier mit einem kleinen Hack behelfen: */
        window.setTimeout(function() {
            /* Transitions wieder aktivieren, … */
            $('#home').addClass('transitions');
            /* … und die Klassen wieder hinzufügen – diesmal wieder mit Transition. */
            $('#bubble-rot,#bubble-blau').addClass('to-the-right');
            $('#back,#again').addClass('scale');
        }, 0);
    });

    $('#back').tap(function() {
        $('#bubble-rot,#bubble-blau').removeClass('to-the-right')
        $('#again').removeClass('scale');
        $('#go').removeClass('scale');
        $('#back').removeClass('scale');
    });
});
	#go {
	position:absolute;
	top:160px;
	left:150px;
	-webkit-transform: scale(1);
	}
	#go.scale{
	-webkit-transform: scale(0);
	}


	#again {
	position:absolute;
	top:160px;
	left:850px;
	-webkit-transform: scale(0);
	}
	#again.scale{
	-webkit-transform: scale(1);
	}


	#back {
	position:absolute;
	top:120px;
	left:650px;
	-webkit-transform: scale(0);
	}
	#back.scale{
	-webkit-transform: scale(1);
	}


	/* Hier sind jetzt alle Transition-Eigenschaften von #go, #again und #back zu einem Block zusammen gefasst */
	.transitions #go, .transitions #again, .transitions #back {
	-webkit-transition-delay: 0s;
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 1s;
	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-delay: 0s;
	}


	#bubble-rot {
	position:absolute;
	top:30px;
	left:20px;
	}
	#bubble-blau {
	position:absolute;
	top:90px;
	left:20px;
	}
	#bubble-rot.to-the-right, #bubble-blau.to-the-right {
	-webkit-transform: translate(500px,0);
	}

	.transitions #bubble-rot, .transitions #bubble-blau {
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 1s;
	-webkit-transition-delay: 0s;
	-webkit-transition-timing-function: ease-in-out;
	}
	/* Die abweichende Eigenschaft transition-delay der blauen Bubble wird hier explizit überschrieben */
	.transitions #bubble-blau{
	-webkit-transition-delay: 0.5s;
	}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="jqtouch/jqtouch.css">
	<link rel="stylesheet" type="text/css" href="test.css">
	<script src="jqtouch/jquery.js"></script>
	<script src="jqtouch/jqtouch.js"></script>
	<script src="test.js"></script>
	</head>
	<body>
	<div id="home" class="current transitions">
	<div>
	<img src="go2.png" id="go">
	<img src="again1.png" id="again">
	<img src="bubble-rot.png" id="bubble-rot">
	<img src="bubble-blau.png" id="bubble-blau">
	<img src="back.png" id="back">
	</div>
	</div>
	</body>
	</html>
	var jQT = $.jQTouch();

	$(document).ready(function() {
	$('#go').tap(function() {
	$('#go,#again,#back').addClass('scale');
	$('#bubble-rot,#bubble-blau').addClass('to-the-right');
	});

	$('#again').tap(function() {
	/* Wir deaktivieren erstmal alle Transitions, … */
	$('#home').removeClass('transitions');
	/* … nehmen dann den beiden Bubbles die Klasse to-the-right weg, was ohne Transition passiert, da die ja deaktiviert sind, … */
	$('#bubble-rot,#bubble-blau').removeClass('to-the-right');
	/* … und wir nehmen #back und #again die Klasse scale weg – auch ohne Transition – damit haben wir die Ausgangslage wieder hergestellt. */
	$('#back,#again').removeClass('scale');

	/* Jetzt müssten wir einfach nur noch die Transitions wieder aktivieren und die Klassen wieder hinzufügen. Das klappt aber nicht, weil das Deaktivieren der Transitions offensichtlich länger dauert als das Hinzufügen der Klasse to-the-right. Auf jeden Fall müssen wir uns hier mit einem kleinen Hack behelfen: */
	window.setTimeout(function() {
	/* Transitions wieder aktivieren, … */
	$('#home').addClass('transitions');
	/* … und die Klassen wieder hinzufügen – diesmal wieder mit Transition. */
	$('#bubble-rot,#bubble-blau').addClass('to-the-right');
	$('#back,#again').addClass('scale');
	}, 0);
	});

	$('#back').tap(function() {
	$('#bubble-rot,#bubble-blau').removeClass('to-the-right')
	$('#again').removeClass('scale');
	$('#go').removeClass('scale');
	$('#back').removeClass('scale');
	});
	});