--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Effects Test Suite</title>
+ <link rel="stylesheet" href="effects.css">
+ <script src="../../../jquery-1.7.2.js"></script>
+ <script src="../../../ui/jquery.effects.core.js"></script>
+ <script src="../../../ui/jquery.effects.blind.js"></script>
+ <script src="../../../ui/jquery.effects.bounce.js"></script>
+ <script src="../../../ui/jquery.effects.clip.js"></script>
+ <script src="../../../ui/jquery.effects.drop.js"></script>
+ <script src="../../../ui/jquery.effects.explode.js"></script>
+ <script src="../../../ui/jquery.effects.fade.js"></script>
+ <script src="../../../ui/jquery.effects.fold.js"></script>
+ <script src="../../../ui/jquery.effects.highlight.js"></script>
+ <script src="../../../ui/jquery.effects.pulsate.js"></script>
+ <script src="../../../ui/jquery.effects.scale.js"></script>
+ <script src="../../../ui/jquery.effects.shake.js"></script>
+ <script src="../../../ui/jquery.effects.slide.js"></script>
+ <script src="../../../ui/jquery.effects.transfer.js"></script>
+ <script src="effects.js"></script>
+</head>
+<body>
+
+<ul class="effects">
+
+ <li>
+ <div class="effect" id="blindUp">
+ <p>Blind up</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="blindDown">
+ <p>Blind down</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="blindLeft">
+ <p>Blind left</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="blindRight">
+ <p>Blind right</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="bounce3times">
+ <p>Bounce 3 times</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="clipHorizontally">
+ <p>Clip horizontally</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="clipVertically">
+ <p>Clip vertically</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="dropDown">
+ <p>Drop down</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="dropUp">
+ <p>Drop up</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="dropLeft">
+ <p>Drop left</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="dropRight">
+ <p>Drop right</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="explode9">
+ <p>Explode in 9 pieces</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="explode36">
+ <p>Explode in 36 pieces</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="fade">
+ <p>Fade</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="fold">
+ <p>Fold</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="highlight">
+ <p>Highlight</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="pulsate">
+ <p>Pulsate 2 times</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="puff">
+ <p>Puff</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="scale">
+ <p>Scale</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="shake">
+ <p>Shake</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="size">
+ <p>Size Default Show/Hide</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="sizeToggle">
+ <p>Size Toggle</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="slideDown">
+ <p>Slide down</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="slideUp">
+ <p>Slide up</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="slideLeft">
+ <p>Slide left</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="slideRight">
+ <p>Slide right</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="transfer">
+ <p>Transfer to first element</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="addClass">
+ <p>addClass</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="removeClass">
+ <p>removeClass</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="toggleClass">
+ <p>toggleClass</p>
+ </div>
+ </li>
+
+ <li>
+ <div class="effect" id="hide">
+ <p>hide/show (jQuery)</p>
+ </div>
+ </li>
+
+</ul>
+
+</body>
+</html>
+++ /dev/null
-
-body,html {
- margin: 0;
- padding: 0;
- font-size: 12px;
- font-family: Arial;
- background: #191919;
- color: #fff;
-}
-body { margin: 1em; }
-
-ul.effects {
- list-style-type: none;
- margin: 0;
- padding: 0;
-}
-
-ul.effects li {
- list-style-type: none;
- margin: 0;
- padding: 0;
- width: 120px;
- height: 100px;
- float: left;
- margin-top: 20px;
- margin-left: 20px;
-}
-
-div.effect {
- width: 120px;
- height: 100px;
- background: #ccc;
- border: 5px outset #aaa;
- float: left;
- cursor: pointer;
- cursor: hand;
-}
-
-div.current {
- border: 5px outset #FF9C08;
- background: #FF9C08;
-}
-
-div.effect p {
- color: #191919;
- font-weight: bold;
- margin: 0px;
- padding: 10px;
-}
-
-.ui-effects-transfer {
- border: 1px dotted #fff;
- background: #666;
- opacity: 0.5;
-}
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects Test Suite</title>
- <link rel="stylesheet" href="effects.all.css" type="text/css">
- <script src="../../../jquery-1.7.2.js"></script>
- <script src="../../../ui/jquery.effects.core.js"></script>
- <script src="../../../ui/jquery.effects.blind.js"></script>
- <script src="../../../ui/jquery.effects.bounce.js"></script>
- <script src="../../../ui/jquery.effects.clip.js"></script>
- <script src="../../../ui/jquery.effects.drop.js"></script>
- <script src="../../../ui/jquery.effects.explode.js"></script>
- <script src="../../../ui/jquery.effects.fade.js"></script>
- <script src="../../../ui/jquery.effects.fold.js"></script>
- <script src="../../../ui/jquery.effects.highlight.js"></script>
- <script src="../../../ui/jquery.effects.pulsate.js"></script>
- <script src="../../../ui/jquery.effects.scale.js"></script>
- <script src="../../../ui/jquery.effects.shake.js"></script>
- <script src="../../../ui/jquery.effects.slide.js"></script>
- <script src="../../../ui/jquery.effects.transfer.js"></script>
- <script src="effects.all.js"></script>
-</head>
-<body>
-
-<ul class="effects">
-
- <li>
- <div class="effect" id="blindUp">
- <p>Blind up</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="blindDown">
- <p>Blind down</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="blindLeft">
- <p>Blind left</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="blindRight">
- <p>Blind right</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="bounce3times">
- <p>Bounce 3 times</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="clipHorizontally">
- <p>Clip horizontally</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="clipVertically">
- <p>Clip vertically</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="dropDown">
- <p>Drop down</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="dropUp">
- <p>Drop up</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="dropLeft">
- <p>Drop left</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="dropRight">
- <p>Drop right</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="explode9">
- <p>Explode in 9 pieces</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="explode36">
- <p>Explode in 36 pieces</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="fade">
- <p>Fade</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="fold">
- <p>Fold</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="highlight">
- <p>Highlight</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="pulsate">
- <p>Pulsate 2 times</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="puff">
- <p>Puff</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="scale">
- <p>Scale</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="shake">
- <p>Shake</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="size">
- <p>Size Default Show/Hide</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="sizeToggle">
- <p>Size Toggle</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="slideDown">
- <p>Slide down</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="slideUp">
- <p>Slide up</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="slideLeft">
- <p>Slide left</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="slideRight">
- <p>Slide right</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="transfer">
- <p>Transfer to first element</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="addClass">
- <p>addClass</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="removeClass">
- <p>removeClass</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="toggleClass">
- <p>toggleClass</p>
- </div>
- </li>
-
- <li>
- <div class="effect" id="hide">
- <p>hide/show (jQuery)</p>
- </div>
- </li>
-
-</ul>
-
-</body>
-</html>
+++ /dev/null
-
-$(function() {
- var duration = 1000, wait = 500;
-
- $("div.effect")
- .hover(function() { $(this).addClass("hover"); },
- function() { $(this).removeClass("hover"); });
-
- var effect = function(el, n, o) {
-
- $.extend(o, {
- easing: "easeOutQuint"
- });
-
- $(el).bind("click", function() {
-
- $(this).addClass("current")
- // delaying the initial animation makes sure that the queue stays in tact
- .delay( 10 )
- .hide( n, o, duration )
- .delay( wait )
- .show( n, o, duration, function() {
- $( this ).removeClass("current");
- });
- });
-
- };
-
- $("#hide").click(function() {
- var el = $(this);
- el.addClass("current").hide(duration, function() {
- setTimeout(function() {
- el.show(duration, function() { el.removeClass("current"); });
- }, wait);
- });
- });
-
- effect("#blindLeft", "blind", { direction: "left" });
- effect("#blindUp", "blind", { direction: "up" });
- effect("#blindRight", "blind", { direction: "right" });
- effect("#blindDown", "blind", { direction: "down" });
-
- effect("#bounce3times", "bounce", { times: 3 });
-
- effect("#clipHorizontally", "clip", { direction: "horizontal" });
- effect("#clipVertically", "clip", { direction: "vertical" });
-
- effect("#dropDown", "drop", { direction: "down" });
- effect("#dropUp", "drop", { direction: "up" });
- effect("#dropLeft", "drop", { direction: "left" });
- effect("#dropRight", "drop", { direction: "right" });
-
- effect("#explode9", "explode", {});
- effect("#explode36", "explode", { pieces: 36 });
-
- effect("#fade", "fade", {});
-
- effect("#fold", "fold", { size: 50 });
-
- effect("#highlight", "highlight", {});
-
- effect("#pulsate", "pulsate", { times: 2 });
-
- effect("#puff", "puff", { times: 2 });
- effect("#scale", "scale", {});
- effect("#size", "size", {});
- $("#sizeToggle").bind("click", function() {
- var opts = { to: { width: 300, height: 300 }};
- $(this).addClass('current')
- .toggle("size", opts, duration)
- .delay(wait)
- .toggle("size", opts, duration, function() {
- $(this).removeClass("current");
- });
- });
-
- $("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); });
-
- effect("#slideDown", "slide", { direction: "down" });
- effect("#slideUp", "slide", { direction: "up" });
- effect("#slideLeft", "slide", { direction: "left" });
- effect("#slideRight", "slide", { direction: "right" });
-
- $("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); });
-
- $("#addClass").click(function() {
- $(this).addClass(function() {
- window.console && console.log(arguments);
- return "current";
- }, duration, function() {
- $(this).removeClass("current");
- });
- });
- $("#removeClass").click(function() {
- $(this).addClass("current").removeClass(function() {
- window.console && console.log(arguments);
- return "current";
- }, duration);
- });
- $("#toggleClass").click(function() {
- $(this).toggleClass(function() {
- window.console && console.log(arguments);
- return "current";
- }, duration);
- });
-});
--- /dev/null
+body {
+ margin: 1em;
+ padding: 0;
+ background: #191919;
+ color: #fff;
+}
+
+ul.effects {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+ul.effects li {
+ padding: 0;
+ width: 120px;
+ height: 100px;
+ float: left;
+ margin-top: 20px;
+ margin-left: 20px;
+}
+
+div.effect {
+ width: 120px;
+ height: 100px;
+ background: #ccc;
+ border: 5px outset #aaa;
+ float: left;
+ cursor: pointer;
+ cursor: hand;
+}
+
+div.current {
+ border: 5px outset #FF9C08;
+ background: #FF9C08;
+}
+
+div.effect p {
+ color: #191919;
+ font-weight: bold;
+ margin: 0;
+ padding: 10px;
+}
+
+.ui-effects-transfer {
+ border: 1px dotted #fff;
+ background: #666;
+ opacity: 0.5;
+}
--- /dev/null
+$(function() {
+
+var duration = 1000,
+ wait = 500;
+
+function effect( elem, name, options ) {
+ $.extend( options, {
+ easing: "easeOutQuint"
+ });
+
+ $( elem ).click(function() {
+ $( this )
+ .addClass( "current" )
+ // delaying the initial animation makes sure that the queue stays in tact
+ .delay( 10 )
+ .hide( name, options, duration )
+ .delay( wait )
+ .show( name, options, duration, function() {
+ $( this ).removeClass( "current" );
+ });
+ });
+}
+
+$( "#hide" ).click(function() {
+ $( this )
+ .addClass( "current" )
+ .hide( duration )
+ .delay( wait )
+ .show( duration, function() {
+ $( this ).removeClass( "current" );
+ });
+});
+
+effect( "#blindLeft", "blind", { direction: "left" } );
+effect( "#blindUp", "blind", { direction: "up" } );
+effect( "#blindRight", "blind", { direction: "right" } );
+effect( "#blindDown", "blind", { direction: "down" } );
+
+effect( "#bounce3times", "bounce", { times: 3 } );
+
+effect( "#clipHorizontally", "clip", { direction: "horizontal" } );
+effect( "#clipVertically", "clip", { direction: "vertical" } );
+
+effect( "#dropDown", "drop", { direction: "down" } );
+effect( "#dropUp", "drop", { direction: "up" } );
+effect( "#dropLeft", "drop", { direction: "left" } );
+effect( "#dropRight", "drop", { direction: "right" } );
+
+effect( "#explode9", "explode", {} );
+effect( "#explode36", "explode", { pieces: 36 } );
+
+effect( "#fade", "fade", {} );
+
+effect( "#fold", "fold", { size: 50 } );
+
+effect( "#highlight", "highlight", {} );
+
+effect( "#pulsate", "pulsate", { times: 2 } );
+
+effect( "#puff", "puff", { times: 2 } );
+effect( "#scale", "scale", {} );
+effect( "#size", "size", {} );
+$( "#sizeToggle" ).click(function() {
+ var options = { to: { width: 300, height: 300 } };
+ $( this )
+ .addClass( "current" )
+ .toggle( "size", options, duration )
+ .delay( wait )
+ .toggle( "size", options, duration, function() {
+ $( this ).removeClass( "current" );
+ });
+});
+
+$( "#shake" ).click(function() {
+ $( this )
+ .addClass( "current" )
+ .effect( "shake", {}, 100, function() {
+ $( this ).removeClass( "current" );
+ });
+});
+
+effect( "#slideDown", "slide", { direction: "down" } );
+effect( "#slideUp", "slide", { direction: "up" } );
+effect( "#slideLeft", "slide", { direction: "left" } );
+effect( "#slideRight", "slide", { direction: "right" } );
+
+$( "#transfer" ).click(function() {
+ $( this )
+ .addClass( "current" )
+ .effect( "transfer", { to: "div:eq(0)" }, 1000, function() {
+ $( this ).removeClass( "current" );
+ });
+});
+
+$( "#addClass" ).click(function() {
+ $( this ).addClass( "current", duration, function() {
+ $( this ).removeClass( "current" );
+ });
+});
+$( "#removeClass" ).click(function() {
+ $( this ).addClass( "current" ).removeClass( "current", duration );
+});
+$( "#toggleClass" ).click(function() {
+ $( this ).toggleClass( "current", duration );
+});
+
+});
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects Test Suite</title>
- <link rel="stylesheet" href="effects.all.css" type="text/css">
- <script src="../../../jquery-1.7.2.js"></script>
- <script src="../../../ui/jquery.effects.core.js"></script>
- <script src="../../../ui/jquery.effects.scale.js"></script>
- <script src="effects.all.js"></script>
- <script>
- jQuery(function( $ ) {
- var test = $( "#testBox" ),
- opts = $( ".arg" ),
- optsRev = $( opts.get().reverse() ),
- doer = $( "#doAnim" ),
- current = $( "#current" ),
- cleanStyle = test[0].style,
- total = 1;
-
- opts.each(function() {
- total *= this.options.length;
- });
-
- opts.change( doAnim );
- doer.click( doAnim );
- $( "#cyclePrev" ).click(function() {
- cycle( -1 );
- });
- $( "#cycleNext" ).click(function() {
- cycle( 1 );
- });
-
- function cycle( direction ) {
- optsRev.each(function() {
- var cur = this.selectedIndex,
- next = cur + direction,
- len = this.options.length;
-
- this.selectedIndex = ( next + len ) % len;
-
- if ( ( next+len ) % len === next ) return false;
- });
- doAnim();
- }
-
-
- function doAnim() {
- var cur = 0;
- opts.each(function() {
- cur *= this.options.length
- cur += this.selectedIndex;
- });
- cur++;
- current.text( "Configuration: " + cur + " of " + total );
- run.apply(test, opts.map(function() {
- return $(this).val();
- }).get());
- }
-
- function run( position, v, h, vo, ho ) {
- var el = this,
- style = el[0].style,
- effect = {
- effect: "scale",
- mode: "effect",
- percent: 200,
- origin: [ vo, ho ],
- duration: 500
- };
- el.stop(true, true);
- if ( typeof style === "object" ) {
- style.cssText = "";
- } else {
- el[0].style = "";
- }
- el.css( "position", position )
- .css( h, 5 )
- .css( v, 5 )
- .delay( 100 )
- .effect( effect );
- }
- });
- </script>
- <style type="text/css">
- #testArea {
-/* border: 5px dashed #777;*/
- width: 200px;
- height: 200px;
- position: relative;
- }
- #testBox {
- width: 50px;
- height: 50px;
- background-color: #bada55;
- color: black;
- border: 10px solid #fff;
- margin: 10px;
- padding: 10px;
- }
- label {
- display: block;
- }
- #controls {
- position: absolute;
- z-index: 300;
- left: 50%;
- top: 50%;
- margin-left: -200px;
- width: 400px;
- opacity: 0.8;
- }
- </style>
-</head>
-<body>
- <div id="testArea">
- <div id="testBox">
- </div>
- </div>
- <div id="controls">
- <label for="pos">Positioning
- <select id="pos" class="arg">
- <option value="absolute">absolute</option>
- <option value="relative">relative</option>
- <option value="fixed">fixed</option>
- </select>
- </label>
- <label for="vertPos">Vertical Positioning
- <select id="vertPos" class="arg">
- <option value="top">top</option>
- <option value="bottom">bottom</option>
- </select>
- </label>
- <label for="horizPos">Horizontal Positioning
- <select id="horizPos" class="arg">
- <option value="left">left</option>
- <option value="right">right</option>
- </select>
- </label>
- <label for="vertOrigin">Vertical Origin
- <select id="vertOrigin" class="arg">
- <option value="top">top</option>
- <option value="middle">middle</option>
- <option value="bottom">bottom</option>
- </select>
- </label>
- <label for="horizOrigin">Horizontal Origin
- <select id="horizOrigin" class="arg">
- <option value="left">left</option>
- <option value="center">center</option>
- <option value="right">right</option>
- </select>
- </label><br />
- <label id="current">jQuery UI Scale Animation Test</label>
- <button id="cyclePrev">Back</button>
- <button id="doAnim">Run Animation</button>
- <button id="cycleNext">Forward</button>
- </div>
-</body>
\ No newline at end of file
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Effects Test Suite</title>
+ <link rel="stylesheet" href="effects.css">
+ <script src="../../../jquery-1.7.2.js"></script>
+ <script src="../../../ui/jquery.effects.core.js"></script>
+ <script src="../../../ui/jquery.effects.scale.js"></script>
+ <script>
+ $(function() {
+ var test = $( "#testBox" ),
+ opts = $( ".arg" ),
+ optsRev = $( opts.get().reverse() ),
+ doer = $( "#doAnim" ),
+ current = $( "#current" ),
+ cleanStyle = test[0].style,
+ total = 1;
+
+ opts.each(function() {
+ total *= this.options.length;
+ });
+
+ opts.change( doAnim );
+ doer.click( doAnim );
+ $( "#cyclePrev" ).click(function() {
+ cycle( -1 );
+ });
+ $( "#cycleNext" ).click(function() {
+ cycle( 1 );
+ });
+
+ function cycle( direction ) {
+ optsRev.each(function() {
+ var cur = this.selectedIndex,
+ next = cur + direction,
+ len = this.options.length;
+
+ this.selectedIndex = ( next + len ) % len;
+
+ if ( ( next+len ) % len === next ) return false;
+ });
+ doAnim();
+ }
+
+
+ function doAnim() {
+ var cur = 0;
+ opts.each(function() {
+ cur *= this.options.length
+ cur += this.selectedIndex;
+ });
+ cur++;
+ current.text( "Configuration: " + cur + " of " + total );
+ run.apply(test, opts.map(function() {
+ return $(this).val();
+ }).get());
+ }
+
+ function run( position, v, h, vo, ho ) {
+ var el = this,
+ style = el[0].style,
+ effect = {
+ effect: "scale",
+ mode: "effect",
+ percent: 200,
+ origin: [ vo, ho ],
+ duration: 500
+ };
+ el.stop(true, true);
+ if ( typeof style === "object" ) {
+ style.cssText = "";
+ } else {
+ el[0].style = "";
+ }
+ el.css( "position", position )
+ .css( h, 5 )
+ .css( v, 5 )
+ .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;
+ }
+ label {
+ display: block;
+ }
+ #controls {
+ position: absolute;
+ z-index: 300;
+ left: 50%;
+ top: 50%;
+ margin-left: -200px;
+ width: 400px;
+ opacity: 0.8;
+ }
+ </style>
+</head>
+<body>
+ <div id="testArea">
+ <div id="testBox">
+ </div>
+ </div>
+ <div id="controls">
+ <label for="pos">Positioning
+ <select id="pos" class="arg">
+ <option value="absolute">absolute</option>
+ <option value="relative">relative</option>
+ <option value="fixed">fixed</option>
+ </select>
+ </label>
+ <label for="vertPos">Vertical Positioning
+ <select id="vertPos" class="arg">
+ <option value="top">top</option>
+ <option value="bottom">bottom</option>
+ </select>
+ </label>
+ <label for="horizPos">Horizontal Positioning
+ <select id="horizPos" class="arg">
+ <option value="left">left</option>
+ <option value="right">right</option>
+ </select>
+ </label>
+ <label for="vertOrigin">Vertical Origin
+ <select id="vertOrigin" class="arg">
+ <option value="top">top</option>
+ <option value="middle">middle</option>
+ <option value="bottom">bottom</option>
+ </select>
+ </label>
+ <label for="horizOrigin">Horizontal Origin
+ <select id="horizOrigin" class="arg">
+ <option value="left">left</option>
+ <option value="center">center</option>
+ <option value="right">right</option>
+ </select>
+ </label><br />
+ <label id="current">jQuery UI Scale Animation Test</label>
+ <button id="cyclePrev">Back</button>
+ <button id="doAnim">Run Animation</button>
+ <button id="cycleNext">Forward</button>
+ </div>
+</body>
\ No newline at end of file
projects / jquery-ui.git / commitdiff