+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects - addClass demo</title>
- <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.9.1.js"></script>
- <script src="../../ui/jquery.ui.effect.js"></script>
- <link rel="stylesheet" href="../demos.css">
- <style>
- .toggler { width: 500px; height: 200px; position: relative; }
- #button { padding: .5em 1em; text-decoration: none; }
- #effect { width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
- .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
- </style>
- <script>
- $(function() {
- $( "#button" ).click(function() {
- $( "#effect" ).addClass( "newClass", 1000, callback );
- return false;
- });
-
- function callback() {
- setTimeout(function() {
- $( "#effect" ).removeClass( "newClass" );
- }, 1500 );
- }
- });
- </script>
-</head>
-<body>
-
-<div class="toggler">
- <div id="effect" class="ui-corner-all">
- Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
- </div>
-</div>
-
-<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
-
-<div class="demo-description">
-<p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p>
-</div>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects Demos</title>
-</head>
-<body>
-
-<ul>
- <li><a href="default.html">Default functionality</a></li>
-</ul>
-
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects - Animate demo</title>
- <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.9.1.js"></script>
- <script src="../../ui/jquery.ui.effect.js"></script>
- <link rel="stylesheet" href="../demos.css">
- <style>
- .toggler { width: 500px; height: 200px; position: relative; }
- #button { padding: .5em 1em; text-decoration: none; }
- #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
- #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
- </style>
- <script>
- $(function() {
- var state = true;
- $( "#button" ).click(function() {
- if ( state ) {
- $( "#effect" ).animate({
- backgroundColor: "#aa0000",
- color: "#fff",
- width: 500
- }, 1000 );
- } else {
- $( "#effect" ).animate({
- backgroundColor: "#fff",
- color: "#000",
- width: 240
- }, 1000 );
- }
- state = !state;
- });
- });
- </script>
-</head>
-<body>
-
-<div class="toggler">
- <div id="effect" class="ui-widget-content ui-corner-all">
- <h3 class="ui-widget-header ui-corner-all">Animate</h3>
- <p>
- Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
- </p>
- </div>
-</div>
-
-<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
-
-<div class="demo-description">
-<p>Click the button above to preview the effect.</p>
-</div>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects Demos</title>
-</head>
-<body>
-
-<ul>
- <li><a href="default.html">Default functionality</a></li>
-</ul>
-
-</body>
-</html>
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Effects - addClass demo</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.9.1.js"></script>
+ <script src="../../ui/jquery.ui.effect.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .toggler { width: 500px; height: 200px; position: relative; }
+ #button { padding: .5em 1em; text-decoration: none; }
+ #effect { width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
+ .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
+ </style>
+ <script>
+ $(function() {
+ $( "#button" ).click(function() {
+ $( "#effect" ).addClass( "newClass", 1000, callback );
+ return false;
+ });
+
+ function callback() {
+ setTimeout(function() {
+ $( "#effect" ).removeClass( "newClass" );
+ }, 1500 );
+ }
+ });
+ </script>
+</head>
+<body>
+
+<div class="toggler">
+ <div id="effect" class="ui-corner-all">
+ Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
+ </div>
+</div>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p>
+</div>
+</body>
+</html>
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Effects - Animate demo</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.9.1.js"></script>
+ <script src="../../ui/jquery.ui.effect.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .toggler { width: 500px; height: 200px; position: relative; }
+ #button { padding: .5em 1em; text-decoration: none; }
+ #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
+ #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
+ </style>
+ <script>
+ $(function() {
+ var state = true;
+ $( "#button" ).click(function() {
+ if ( state ) {
+ $( "#effect" ).animate({
+ backgroundColor: "#aa0000",
+ color: "#fff",
+ width: 500
+ }, 1000 );
+ } else {
+ $( "#effect" ).animate({
+ backgroundColor: "#fff",
+ color: "#000",
+ width: 240
+ }, 1000 );
+ }
+ state = !state;
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="toggler">
+ <div id="effect" class="ui-widget-content ui-corner-all">
+ <h3 class="ui-widget-header ui-corner-all">Animate</h3>
+ <p>
+ Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
+ </p>
+ </div>
+</div>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Effects - Hide Demo</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.9.1.js"></script>
+ <script src="../../ui/jquery.ui.effect.js"></script>
+ <script src="../../ui/jquery.ui.effect-blind.js"></script>
+ <script src="../../ui/jquery.ui.effect-bounce.js"></script>
+ <script src="../../ui/jquery.ui.effect-clip.js"></script>
+ <script src="../../ui/jquery.ui.effect-drop.js"></script>
+ <script src="../../ui/jquery.ui.effect-explode.js"></script>
+ <script src="../../ui/jquery.ui.effect-fold.js"></script>
+ <script src="../../ui/jquery.ui.effect-highlight.js"></script>
+ <script src="../../ui/jquery.ui.effect-pulsate.js"></script>
+ <script src="../../ui/jquery.ui.effect-scale.js"></script>
+ <script src="../../ui/jquery.ui.effect-shake.js"></script>
+ <script src="../../ui/jquery.ui.effect-slide.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .toggler { width: 500px; height: 200px; }
+ #button { padding: .5em 1em; text-decoration: none; }
+ #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
+ #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
+ </style>
+ <script>
+ $(function() {
+ // run the currently selected effect
+ function runEffect() {
+ // get effect type from
+ var selectedEffect = $( "#effectTypes" ).val();
+
+ // most effect types need no options passed by default
+ var options = {};
+ // some effects have required parameters
+ if ( selectedEffect === "scale" ) {
+ options = { percent: 0 };
+ } else if ( selectedEffect === "size" ) {
+ options = { to: { width: 200, height: 60 } };
+ }
+
+ // run the effect
+ $( "#effect" ).hide( selectedEffect, options, 1000, callback );
+ };
+
+ // callback function to bring a hidden box back
+ function callback() {
+ setTimeout(function() {
+ $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
+ }, 1000 );
+ };
+
+ // set effect from select menu value
+ $( "#button" ).click(function() {
+ runEffect();
+ return false;
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="toggler">
+ <div id="effect" class="ui-widget-content ui-corner-all">
+ <h3 class="ui-widget-header ui-corner-all">Hide</h3>
+ <p>
+ Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
+ </p>
+ </div>
+</div>
+
+<select name="effects" id="effectTypes">
+ <option value="blind">Blind</option>
+ <option value="bounce">Bounce</option>
+ <option value="clip">Clip</option>
+ <option value="drop">Drop</option>
+ <option value="explode">Explode</option>
+ <option value="fold">Fold</option>
+ <option value="highlight">Highlight</option>
+ <option value="puff">Puff</option>
+ <option value="pulsate">Pulsate</option>
+ <option value="scale">Scale</option>
+ <option value="shake">Shake</option>
+ <option value="size">Size</option>
+ <option value="slide">Slide</option>
+</select>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>
<ul>
<li><a href="default.html">Effect showcase</a></li>
<li><a href="easing.html">Easing showcase</a></li>
+ <li><a href="addClass.html">.addClass()</a></li>
+ <li><a href="animate.html">.animate()</a></li>
+ <li><a href="hide.html">.hide()</a></li>
+ <li><a href="removeClass.html">.removeClass()</a></li>
+ <li><a href="show.html">.show()</a></li>
+ <li><a href="switchClass.html">.switchClass()</a></li>
+ <li><a href="toggle.html">.toggle()</a></li>
+ <li><a href="toggleClass.html">.toggleClass()</a></li>
</ul>
</body>
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Effects - removeClass Demo</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.9.1.js"></script>
+ <script src="../../ui/jquery.ui.effect.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .toggler { width: 500px; height: 200px; position: relative; }
+ #button { padding: .5em 1em; text-decoration: none; }
+ #effect { position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
+ .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
+ </style>
+ <script>
+ $(function() {
+ $( "#button" ).click(function() {
+ $( "#effect" ).removeClass( "newClass", 1000, callback );
+ return false;
+ });
+
+ function callback() {
+ setTimeout(function() {
+ $( "#effect" ).addClass( "newClass" );
+ }, 1500 );
+ }
+ });
+ </script>
+</head>
+<body>
+
+<div class="toggler">
+ <div id="effect" class="newClass ui-corner-all">
+ Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
+ </div>
+</div>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Effects - Show Demo</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.9.1.js"></script>
+ <script src="../../ui/jquery.ui.effect.js"></script>
+ <script src="../../ui/jquery.ui.effect-blind.js"></script>
+ <script src="../../ui/jquery.ui.effect-bounce.js"></script>
+ <script src="../../ui/jquery.ui.effect-clip.js"></script>
+ <script src="../../ui/jquery.ui.effect-drop.js"></script>
+ <script src="../../ui/jquery.ui.effect-explode.js"></script>
+ <script src="../../ui/jquery.ui.effect-fold.js"></script>
+ <script src="../../ui/jquery.ui.effect-highlight.js"></script>
+ <script src="../../ui/jquery.ui.effect-pulsate.js"></script>
+ <script src="../../ui/jquery.ui.effect-scale.js"></script>
+ <script src="../../ui/jquery.ui.effect-shake.js"></script>
+ <script src="../../ui/jquery.ui.effect-slide.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .toggler { width: 500px; height: 200px; }
+ #button { padding: .5em 1em; text-decoration: none; }
+ #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
+ #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
+ </style>
+ <script>
+ $(function() {
+ // run the currently selected effect
+ function runEffect() {
+ // get effect type from
+ var selectedEffect = $( "#effectTypes" ).val();
+
+ // most effect types need no options passed by default
+ var options = {};
+ // some effects have required parameters
+ if ( selectedEffect === "scale" ) {
+ options = { percent: 100 };
+ } else if ( selectedEffect === "size" ) {
+ options = { to: { width: 280, height: 185 } };
+ }
+
+ // run the effect
+ $( "#effect" ).show( selectedEffect, options, 500, callback );
+ };
+
+ //callback function to bring a hidden box back
+ function callback() {
+ setTimeout(function() {
+ $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
+ }, 1000 );
+ };
+
+ // set effect from select menu value
+ $( "#button" ).click(function() {
+ runEffect();
+ return false;
+ });
+
+ $( "#effect" ).hide();
+ });
+ </script>
+</head>
+<body>
+
+<div class="toggler">
+ <div id="effect" class="ui-widget-content ui-corner-all">
+ <h3 class="ui-widget-header ui-corner-all">Show</h3>
+ <p>
+ Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
+ </p>
+ </div>
+</div>
+
+<select name="effects" id="effectTypes">
+ <option value="blind">Blind</option>
+ <option value="bounce">Bounce</option>
+ <option value="clip">Clip</option>
+ <option value="drop">Drop</option>
+ <option value="explode">Explode</option>
+ <option value="fold">Fold</option>
+ <option value="highlight">Highlight</option>
+ <option value="puff">Puff</option>
+ <option value="pulsate">Pulsate</option>
+ <option value="scale">Scale</option>
+ <option value="shake">Shake</option>
+ <option value="size">Size</option>
+ <option value="slide">Slide</option>
+</select>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Effects - switchClass Demo</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.9.1.js"></script>
+ <script src="../../ui/jquery.ui.effect.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .toggler { width: 500px; height: 200px; position: relative; }
+ #button { padding: .5em 1em; text-decoration: none; }
+ #effect { position: relative; }
+ .newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; }
+ .anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
+ </style>
+ <script>
+ $(function() {
+ $( "#button" ).click(function(){
+ $( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
+ $( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 );
+ return false;
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="toggler">
+ <div id="effect" class="newClass ui-corner-all">
+ Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
+ </div>
+</div>
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Effects - Toggle Demo</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.9.1.js"></script>
+ <script src="../../ui/jquery.ui.effect.js"></script>
+ <script src="../../ui/jquery.ui.effect-blind.js"></script>
+ <script src="../../ui/jquery.ui.effect-bounce.js"></script>
+ <script src="../../ui/jquery.ui.effect-clip.js"></script>
+ <script src="../../ui/jquery.ui.effect-drop.js"></script>
+ <script src="../../ui/jquery.ui.effect-explode.js"></script>
+ <script src="../../ui/jquery.ui.effect-fold.js"></script>
+ <script src="../../ui/jquery.ui.effect-highlight.js"></script>
+ <script src="../../ui/jquery.ui.effect-pulsate.js"></script>
+ <script src="../../ui/jquery.ui.effect-scale.js"></script>
+ <script src="../../ui/jquery.ui.effect-shake.js"></script>
+ <script src="../../ui/jquery.ui.effect-slide.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .toggler {
+ width: 500px;
+ height: 200px;
+ }
+ #button {
+ padding: .5em 1em;
+ text-decoration: none;
+ }
+ #effect {
+ position: relative;
+ width: 240px;
+ height: 135px;
+ padding: 0.4em;
+ }
+ #effect h3 {
+ margin: 0;
+ padding: 0.4em;
+ text-align: center;
+ }
+ </style>
+ <script>
+ $(function() {
+ // run the currently selected effect
+ function runEffect() {
+ // get effect type from
+ var selectedEffect = $( "#effectTypes" ).val();
+
+ // most effect types need no options passed by default
+ var options = {};
+ // some effects have required parameters
+ if ( selectedEffect === "scale" ) {
+ options = { percent: 0 };
+ } else if ( selectedEffect === "size" ) {
+ options = { to: { width: 200, height: 60 } };
+ }
+
+ // run the effect
+ $( "#effect" ).toggle( selectedEffect, options, 500 );
+ };
+
+ // set effect from select menu value
+ $( "#button" ).click(function() {
+ runEffect();
+ return false;
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="toggler">
+ <div id="effect" class="ui-widget-content ui-corner-all">
+ <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
+ <p>
+ Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
+ </p>
+ </div>
+</div>
+
+<select name="effects" id="effectTypes">
+ <option value="blind">Blind</option>
+ <option value="bounce">Bounce</option>
+ <option value="clip">Clip</option>
+ <option value="drop">Drop</option>
+ <option value="explode">Explode</option>
+ <option value="fold">Fold</option>
+ <option value="highlight">Highlight</option>
+ <option value="puff">Puff</option>
+ <option value="pulsate">Pulsate</option>
+ <option value="scale">Scale</option>
+ <option value="shake">Shake</option>
+ <option value="size">Size</option>
+ <option value="slide">Slide</option>
+</select>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Effects - toggleClass Demo</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.9.1.js"></script>
+ <script src="../../ui/jquery.ui.effect.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .toggler { width: 500px; height: 200px; position: relative; }
+ #button { padding: .5em 1em; text-decoration: none; }
+ #effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
+ .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
+ </style>
+ <script>
+ $(function() {
+ $( "#button" ).click(function() {
+ $( "#effect" ).toggleClass( "newClass", 1000 );
+ return false;
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="toggler">
+ <div id="effect" class="newClass ui-corner-all">
+ Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
+ </div>
+</div>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects - Hide Demo</title>
- <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.9.1.js"></script>
- <script src="../../ui/jquery.ui.effect.js"></script>
- <script src="../../ui/jquery.ui.effect-blind.js"></script>
- <script src="../../ui/jquery.ui.effect-bounce.js"></script>
- <script src="../../ui/jquery.ui.effect-clip.js"></script>
- <script src="../../ui/jquery.ui.effect-drop.js"></script>
- <script src="../../ui/jquery.ui.effect-explode.js"></script>
- <script src="../../ui/jquery.ui.effect-fold.js"></script>
- <script src="../../ui/jquery.ui.effect-highlight.js"></script>
- <script src="../../ui/jquery.ui.effect-pulsate.js"></script>
- <script src="../../ui/jquery.ui.effect-scale.js"></script>
- <script src="../../ui/jquery.ui.effect-shake.js"></script>
- <script src="../../ui/jquery.ui.effect-slide.js"></script>
- <link rel="stylesheet" href="../demos.css">
- <style>
- .toggler { width: 500px; height: 200px; }
- #button { padding: .5em 1em; text-decoration: none; }
- #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
- #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
- </style>
- <script>
- $(function() {
- // run the currently selected effect
- function runEffect() {
- // get effect type from
- var selectedEffect = $( "#effectTypes" ).val();
-
- // most effect types need no options passed by default
- var options = {};
- // some effects have required parameters
- if ( selectedEffect === "scale" ) {
- options = { percent: 0 };
- } else if ( selectedEffect === "size" ) {
- options = { to: { width: 200, height: 60 } };
- }
-
- // run the effect
- $( "#effect" ).hide( selectedEffect, options, 1000, callback );
- };
-
- // callback function to bring a hidden box back
- function callback() {
- setTimeout(function() {
- $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
- }, 1000 );
- };
-
- // set effect from select menu value
- $( "#button" ).click(function() {
- runEffect();
- return false;
- });
- });
- </script>
-</head>
-<body>
-
-<div class="toggler">
- <div id="effect" class="ui-widget-content ui-corner-all">
- <h3 class="ui-widget-header ui-corner-all">Hide</h3>
- <p>
- Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
- </p>
- </div>
-</div>
-
-<select name="effects" id="effectTypes">
- <option value="blind">Blind</option>
- <option value="bounce">Bounce</option>
- <option value="clip">Clip</option>
- <option value="drop">Drop</option>
- <option value="explode">Explode</option>
- <option value="fold">Fold</option>
- <option value="highlight">Highlight</option>
- <option value="puff">Puff</option>
- <option value="pulsate">Pulsate</option>
- <option value="scale">Scale</option>
- <option value="shake">Shake</option>
- <option value="size">Size</option>
- <option value="slide">Slide</option>
-</select>
-
-<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
-
-<div class="demo-description">
-<p>Click the button above to preview the effect.</p>
-</div>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects Demos</title>
-</head>
-<body>
-
-<ul>
- <li><a href="default.html">Default functionality</a></li>
-</ul>
-
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects - removeClass Demo</title>
- <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.9.1.js"></script>
- <script src="../../ui/jquery.ui.effect.js"></script>
- <link rel="stylesheet" href="../demos.css">
- <style>
- .toggler { width: 500px; height: 200px; position: relative; }
- #button { padding: .5em 1em; text-decoration: none; }
- #effect { position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
- .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
- </style>
- <script>
- $(function() {
- $( "#button" ).click(function() {
- $( "#effect" ).removeClass( "newClass", 1000, callback );
- return false;
- });
-
- function callback() {
- setTimeout(function() {
- $( "#effect" ).addClass( "newClass" );
- }, 1500 );
- }
- });
- </script>
-</head>
-<body>
-
-<div class="toggler">
- <div id="effect" class="newClass ui-corner-all">
- Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
- </div>
-</div>
-
-<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
-
-<div class="demo-description">
-<p>Click the button above to preview the effect.</p>
-</div>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects Demos</title>
-</head>
-<body>
-
-<ul>
- <li><a href="default.html">Default functionality</a></li>
-</ul>
-
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects - Show Demo</title>
- <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.9.1.js"></script>
- <script src="../../ui/jquery.ui.effect.js"></script>
- <script src="../../ui/jquery.ui.effect-blind.js"></script>
- <script src="../../ui/jquery.ui.effect-bounce.js"></script>
- <script src="../../ui/jquery.ui.effect-clip.js"></script>
- <script src="../../ui/jquery.ui.effect-drop.js"></script>
- <script src="../../ui/jquery.ui.effect-explode.js"></script>
- <script src="../../ui/jquery.ui.effect-fold.js"></script>
- <script src="../../ui/jquery.ui.effect-highlight.js"></script>
- <script src="../../ui/jquery.ui.effect-pulsate.js"></script>
- <script src="../../ui/jquery.ui.effect-scale.js"></script>
- <script src="../../ui/jquery.ui.effect-shake.js"></script>
- <script src="../../ui/jquery.ui.effect-slide.js"></script>
- <link rel="stylesheet" href="../demos.css">
- <style>
- .toggler { width: 500px; height: 200px; }
- #button { padding: .5em 1em; text-decoration: none; }
- #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
- #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
- </style>
- <script>
- $(function() {
- // run the currently selected effect
- function runEffect() {
- // get effect type from
- var selectedEffect = $( "#effectTypes" ).val();
-
- // most effect types need no options passed by default
- var options = {};
- // some effects have required parameters
- if ( selectedEffect === "scale" ) {
- options = { percent: 100 };
- } else if ( selectedEffect === "size" ) {
- options = { to: { width: 280, height: 185 } };
- }
-
- // run the effect
- $( "#effect" ).show( selectedEffect, options, 500, callback );
- };
-
- //callback function to bring a hidden box back
- function callback() {
- setTimeout(function() {
- $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
- }, 1000 );
- };
-
- // set effect from select menu value
- $( "#button" ).click(function() {
- runEffect();
- return false;
- });
-
- $( "#effect" ).hide();
- });
- </script>
-</head>
-<body>
-
-<div class="toggler">
- <div id="effect" class="ui-widget-content ui-corner-all">
- <h3 class="ui-widget-header ui-corner-all">Show</h3>
- <p>
- Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
- </p>
- </div>
-</div>
-
-<select name="effects" id="effectTypes">
- <option value="blind">Blind</option>
- <option value="bounce">Bounce</option>
- <option value="clip">Clip</option>
- <option value="drop">Drop</option>
- <option value="explode">Explode</option>
- <option value="fold">Fold</option>
- <option value="highlight">Highlight</option>
- <option value="puff">Puff</option>
- <option value="pulsate">Pulsate</option>
- <option value="scale">Scale</option>
- <option value="shake">Shake</option>
- <option value="size">Size</option>
- <option value="slide">Slide</option>
-</select>
-
-<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
-
-<div class="demo-description">
-<p>Click the button above to preview the effect.</p>
-</div>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects Demos</title>
-</head>
-<body>
-
-<ul>
- <li><a href="default.html">Default functionality</a></li>
-</ul>
-
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects - switchClass Demo</title>
- <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.9.1.js"></script>
- <script src="../../ui/jquery.ui.effect.js"></script>
- <link rel="stylesheet" href="../demos.css">
- <style>
- .toggler { width: 500px; height: 200px; position: relative; }
- #button { padding: .5em 1em; text-decoration: none; }
- #effect { position: relative; }
- .newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; }
- .anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
- </style>
- <script>
- $(function() {
- $( "#button" ).click(function(){
- $( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
- $( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 );
- return false;
- });
- });
- </script>
-</head>
-<body>
-
-<div class="toggler">
- <div id="effect" class="newClass ui-corner-all">
- Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
- </div>
-</div>
-<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
-
-<div class="demo-description">
-<p>Click the button above to preview the effect.</p>
-</div>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects Demos</title>
-</head>
-<body>
-
-<ul>
- <li><a href="default.html">Default functionality</a></li>
-</ul>
-
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects - Toggle Demo</title>
- <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.9.1.js"></script>
- <script src="../../ui/jquery.ui.effect.js"></script>
- <script src="../../ui/jquery.ui.effect-blind.js"></script>
- <script src="../../ui/jquery.ui.effect-bounce.js"></script>
- <script src="../../ui/jquery.ui.effect-clip.js"></script>
- <script src="../../ui/jquery.ui.effect-drop.js"></script>
- <script src="../../ui/jquery.ui.effect-explode.js"></script>
- <script src="../../ui/jquery.ui.effect-fold.js"></script>
- <script src="../../ui/jquery.ui.effect-highlight.js"></script>
- <script src="../../ui/jquery.ui.effect-pulsate.js"></script>
- <script src="../../ui/jquery.ui.effect-scale.js"></script>
- <script src="../../ui/jquery.ui.effect-shake.js"></script>
- <script src="../../ui/jquery.ui.effect-slide.js"></script>
- <link rel="stylesheet" href="../demos.css">
- <style>
- .toggler {
- width: 500px;
- height: 200px;
- }
- #button {
- padding: .5em 1em;
- text-decoration: none;
- }
- #effect {
- position: relative;
- width: 240px;
- height: 135px;
- padding: 0.4em;
- }
- #effect h3 {
- margin: 0;
- padding: 0.4em;
- text-align: center;
- }
- </style>
- <script>
- $(function() {
- // run the currently selected effect
- function runEffect() {
- // get effect type from
- var selectedEffect = $( "#effectTypes" ).val();
-
- // most effect types need no options passed by default
- var options = {};
- // some effects have required parameters
- if ( selectedEffect === "scale" ) {
- options = { percent: 0 };
- } else if ( selectedEffect === "size" ) {
- options = { to: { width: 200, height: 60 } };
- }
-
- // run the effect
- $( "#effect" ).toggle( selectedEffect, options, 500 );
- };
-
- // set effect from select menu value
- $( "#button" ).click(function() {
- runEffect();
- return false;
- });
- });
- </script>
-</head>
-<body>
-
-<div class="toggler">
- <div id="effect" class="ui-widget-content ui-corner-all">
- <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
- <p>
- Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
- </p>
- </div>
-</div>
-
-<select name="effects" id="effectTypes">
- <option value="blind">Blind</option>
- <option value="bounce">Bounce</option>
- <option value="clip">Clip</option>
- <option value="drop">Drop</option>
- <option value="explode">Explode</option>
- <option value="fold">Fold</option>
- <option value="highlight">Highlight</option>
- <option value="puff">Puff</option>
- <option value="pulsate">Pulsate</option>
- <option value="scale">Scale</option>
- <option value="shake">Shake</option>
- <option value="size">Size</option>
- <option value="slide">Slide</option>
-</select>
-
-<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
-
-<div class="demo-description">
-<p>Click the button above to preview the effect.</p>
-</div>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects Demos</title>
-</head>
-<body>
-
-<ul>
- <li><a href="default.html">Default functionality</a></li>
-</ul>
-
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects - toggleClass Demo</title>
- <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.9.1.js"></script>
- <script src="../../ui/jquery.ui.effect.js"></script>
- <link rel="stylesheet" href="../demos.css">
- <style>
- .toggler { width: 500px; height: 200px; position: relative; }
- #button { padding: .5em 1em; text-decoration: none; }
- #effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
- .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
- </style>
- <script>
- $(function() {
- $( "#button" ).click(function() {
- $( "#effect" ).toggleClass( "newClass", 1000 );
- return false;
- });
- });
- </script>
-</head>
-<body>
-
-<div class="toggler">
- <div id="effect" class="newClass ui-corner-all">
- Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
- </div>
-</div>
-
-<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
-
-<div class="demo-description">
-<p>Click the button above to preview the effect.</p>
-</div>
-</body>
-</html>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Effects Demos</title>
-</head>
-<body>
-
-<ul>
- <li><a href="default.html">Default functionality</a></li>
-</ul>
-
-</body>
-</html>
projects / jquery-ui.git / commitdiff