mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
b6bec797d6
1. Introduces a set of helper methods to easily create and define new effects. 2. Uses clip animations and placeholders instead of wrappers for clip effects. 3. Ensures all animations are detectable as animated Fixes #10599 Fixes #9477 Fixes #9257 Fixes #9066 Fixes #8867 Fixes #8671 Fixes #8505 Fixes #7885 Fixes #7041 Closes gh-1017
99 lines
3.1 KiB
HTML
99 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery UI Effects - Hide Demo</title>
|
|
<link rel="stylesheet" href="../../themes/base/all.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-shake.js"></script>
|
|
<script src="../../ui/effect-size.js"></script>
|
|
<script src="../../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: 170px; 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: 50 };
|
|
} 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();
|
|
});
|
|
});
|
|
</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="fade">Fade</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>
|
|
|
|
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>
|
|
|
|
<div class="demo-description">
|
|
<p>Click the button above to preview the effect.</p>
|
|
</div>
|
|
</body>
|
|
</html>
|