5 files changed, 49 insertions, 80 deletions
diff --git a/tests/visual/effects/all.html b/tests/visual/effects/all.html
index c1bdd9fa3..e3fa3ee48 100644
--- a/tests/visual/effects/all.html
+++ b/tests/visual/effects/all.html
@@ -4,24 +4,10 @@
 	<meta charset="utf-8">
 	<title>jQuery UI Effects Test Suite</title>
 	<link rel="stylesheet" href="effects.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/effect.js"></script>
-	<script src="../../../ui/effect-blind.js"></script>
-	<script src="../../../ui/effect-bounce.js"></script>
-	<script src="../../../ui/effect-clip.js"></script>
-	<script src="../../../ui/effect-drop.js"></script>
-	<script src="../../../ui/effect-explode.js"></script>
-	<script src="../../../ui/effect-fade.js"></script>
-	<script src="../../../ui/effect-fold.js"></script>
-	<script src="../../../ui/effect-highlight.js"></script>
-	<script src="../../../ui/effect-puff.js"></script>
-	<script src="../../../ui/effect-pulsate.js"></script>
-	<script src="../../../ui/effect-scale.js"></script>
-	<script src="../../../ui/effect-size.js"></script>
-	<script src="../../../ui/effect-shake.js"></script>
-	<script src="../../../ui/effect-slide.js"></script>
-	<script src="../../../ui/effect-transfer.js"></script>
-	<script src="effects.js"></script>
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js" data-modules="effects-all" data-composite="true">
+		require( ["./effects.js"] );
+	</script>
 </head>
 <body>
 
diff --git a/tests/visual/effects/clip.html b/tests/visual/effects/clip.html
index b8ede414b..c20e6506a 100644
--- a/tests/visual/effects/clip.html
+++ b/tests/visual/effects/clip.html
@@ -4,11 +4,9 @@
 	<meta charset="utf-8">
 	<title>jQuery UI Effects Test Suite</title>
 	<link rel="stylesheet" href="effects.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/effect.js"></script>
-	<script src="../../../ui/effect-clip.js"></script>
-	<script>
-	$(function() {
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js" data-modules="effect effect-clip"
+		data-composite="true">
 		var target = $( ".target" ),
 			duration = 2000;
 
@@ -33,7 +31,6 @@
 				direction: "vertical"
 			}, duration );
 		});
-	});
 	</script>
 	<style>
 	.clipped {
diff --git a/tests/visual/effects/effects.js b/tests/visual/effects/effects.js
index 0b0de96f4..6d36a55ea 100644
--- a/tests/visual/effects/effects.js
+++ b/tests/visual/effects/effects.js
@@ -1,5 +1,3 @@
-$( function() {
-
 var duration = 1000,
 	wait = 500;
 
@@ -104,5 +102,3 @@ $( "#removeClass" ).on( "click", function() {
 $( "#toggleClass" ).on( "click", function() {
 	$( this ).toggleClass( "current", duration );
 } );
-
-} );
diff --git a/tests/visual/effects/scale.html b/tests/visual/effects/scale.html
index 0723d9458..b032ac896 100644
--- a/tests/visual/effects/scale.html
+++ b/tests/visual/effects/scale.html
@@ -4,12 +4,39 @@
 	<meta charset="utf-8">
 	<title>jQuery UI Effects Test Suite</title>
 	<link rel="stylesheet" href="effects.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/effect.js"></script>
-	<script src="../../../ui/effect-scale.js"></script>
-	<script src="../../../ui/effect-size.js"></script>
-	<script>
-	$(function() {
+	<style>
+	#testArea {
+		width: 200px;
+		height: 200px;
+		position: relative;
+	}
+	#testBox {
+		width: 50px;
+		height: 50px;
+		background-color: #bada55;
+		color: black;
+		border: 10px solid #fff;
+		margin: 10px;
+		padding: 10px;
+		position: absolute;
+		left: 5px;
+		top: 5px;
+	}
+	label {
+		display: block;
+	}
+	#controls {
+		position: absolute;
+		z-index: 300;
+		left: 50%;
+		top: 50%;
+		margin-left: -200px;
+		width: 400px;
+		opacity: 0.8;
+	}
+	</style>
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js" data-modules="effect-scale" data-composite="true">
 		var test = $( "#testBox" ),
 			opts = $( ".arg" ),
 			optsRev = $( opts.get().reverse() ),
@@ -84,39 +111,7 @@
 				.delay( 100 )
 				.effect( effect );
 		}
-	});
 	</script>
-	<style>
-	#testArea {
-		width: 200px;
-		height: 200px;
-		position: relative;
-	}
-	#testBox {
-		width: 50px;
-		height: 50px;
-		background-color: #bada55;
-		color: black;
-		border: 10px solid #fff;
-		margin: 10px;
-		padding: 10px;
-		position: absolute;
-		left: 5px;
-		top: 5px;
-	}
-	label {
-		display: block;
-	}
-	#controls {
-		position: absolute;
-		z-index: 300;
-		left: 50%;
-		top: 50%;
-		margin-left: -200px;
-		width: 400px;
-		opacity: 0.8;
-	}
-	</style>
 </head>
 <body>
 
diff --git a/tests/visual/effects/shake.html b/tests/visual/effects/shake.html
index 29159e39d..c93f0eb57 100644
--- a/tests/visual/effects/shake.html
+++ b/tests/visual/effects/shake.html
@@ -4,20 +4,6 @@
 	<meta charset="utf-8">
 	<title>jQuery UI Effects Test Suite</title>
 	<link rel="stylesheet" href="effects.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/effect.js"></script>
-	<script src="../../../ui/effect-scale.js"></script>
-	<script src="../../../ui/effect-shake.js"></script>
-	<script>
-	$(function() {
-		$( "#btn" ).on( "click", function() {
-			$( ".shake" ).effect( "shake", {
-				duration: +$( "#duration" ).val(),
-				mode: "toggle"
-			});
-		});
-	});
-	</script>
 	<style>
 	#inputbox {
 		background: green;
@@ -54,6 +40,15 @@
 		padding: 10px;
 	}
 	</style>
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js" data-modules="effect-shake" data-composite="true">
+		$( "#btn" ).on( "click", function() {
+			$( ".shake" ).effect( "shake", {
+				duration: +$( "#duration" ).val(),
+				mode: "toggle"
+			});
+		});
+	</script>
 </head>
 <body>