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
135 lines
2.3 KiB
HTML
135 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery UI Effects Test Suite</title>
|
|
|
|
<script src="../../jquery.js"></script>
|
|
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
|
|
<script src="../../../external/qunit/qunit.js"></script>
|
|
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
|
|
<script src="../testsuite.js"></script>
|
|
<script>
|
|
TestHelpers.loadResources({
|
|
js: [
|
|
"ui/effect.js",
|
|
"ui/effect-blind.js",
|
|
"ui/effect-bounce.js",
|
|
"ui/effect-clip.js",
|
|
"ui/effect-drop.js",
|
|
"ui/effect-explode.js",
|
|
"ui/effect-fade.js",
|
|
"ui/effect-fold.js",
|
|
"ui/effect-highlight.js",
|
|
"ui/effect-puff.js",
|
|
"ui/effect-pulsate.js",
|
|
"ui/effect-scale.js",
|
|
"ui/effect-shake.js",
|
|
"ui/effect-size.js",
|
|
"ui/effect-slide.js",
|
|
"ui/effect-transfer.js"
|
|
]
|
|
});
|
|
</script>
|
|
|
|
<script src="effects_core.js"></script>
|
|
<script src="effects_scale.js"></script>
|
|
|
|
<script src="../swarminject.js"></script>
|
|
<style>
|
|
#qunit-fixture {
|
|
width: 1000px;
|
|
height: 1000px;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
.test {
|
|
background: #000;
|
|
border: 0;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
.testAddBorder {
|
|
border: 10px solid #000;
|
|
}
|
|
.testChildren,
|
|
.testChangeBackground {
|
|
background: #fff;
|
|
}
|
|
.test h2 {
|
|
font-size: 10px;
|
|
}
|
|
.testChildren h2 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.relWidth {
|
|
width: 50%;
|
|
}
|
|
|
|
.relHeight {
|
|
height: 50%;
|
|
}
|
|
|
|
.testScale {
|
|
border: 5px solid #000;
|
|
padding: 5px;
|
|
margin: 5px;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.ticket7106 {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
.ticket7106.animate {
|
|
width: 100px;
|
|
}
|
|
|
|
.relative {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
.absolute {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
.fixed {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
.static {
|
|
position: static;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="qunit"></div>
|
|
<div id="qunit-fixture">
|
|
<div id="elem" class="test"></div>
|
|
<div class="hidden test">
|
|
<div>.</div>
|
|
</div>
|
|
<div class="animateClass test">
|
|
<h2>Child Element Test</h2>
|
|
</div>
|
|
<div class="relWidth relHeight testAddBorder">
|
|
<h2>Slide with relative width</h2>
|
|
</div>
|
|
<div class="testScale"></div>
|
|
<div class="ticket7106"></div>
|
|
<div class="relative"></div>
|
|
<div class="absolute"></div>
|
|
<div class="fixed"></div>
|
|
<div class="static"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|