mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +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
220 lines
3.6 KiB
HTML
220 lines
3.6 KiB
HTML
<!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="../../../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>
|
|
</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>
|