<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects Test Suite</title> <link rel="stylesheet" href="effects.css"> <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() ), doer = $( "#doAnim" ), current = $( "#current" ), total = 1; opts.each(function() { total *= this.options.length; }); opts.on( "change", doAnim ); doer.on( "click", doAnim ); $( "#cyclePrev" ).on( "click", function() { cycle( -1 ); }); $( "#cycleNext" ).on( "click", function() { cycle( 1 ); }); function cycle( direction ) { optsRev.each(function() { var cur = this.selectedIndex, next = cur + direction, len = this.options.length, newIndex = ( next + len ) % len; this.selectedIndex = newIndex; if ( newIndex === 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> </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> </html>