mirror of
https://github.com/jquery/jquery-ui.git
synced 2026-01-30 11:08:07 -05:00
Added effects demonstrations
This commit is contained in:
Keith Wood
@@ -155,6 +155,21 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<br style="clear:both;">
|
||||
</div>
|
||||
<div class="section" style="border:0;">
|
||||
<p class="side-menu-title">
|
||||
Effects
|
||||
</p>
|
||||
<div id="links" class="normal">
|
||||
|
||||
<ul class="component-links">
|
||||
<li><a href="#ui.effects.easing" title="Goto Easing Effect's Component Page">Easing</a></li>
|
||||
<li><a href="#ui.effects.general" title="Goto General Effect's Component Page">General</a></li>
|
||||
<li><a href="#ui.effects.showhide" title="Goto Show/Hide Effect's Component Page">Show/Hide</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<br style="clear:both;">
|
||||
</div>
|
||||
</td>
|
||||
|
||||
67
demos/functional/templates/ui.effects.easing.html
Normal file
67
demos/functional/templates/ui.effects.easing.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Easing Effects',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Easings',
|
||||
desc: 'Easing is acceleration, a change in speed. Easings control how an animation progresses over time.<br/>' +
|
||||
'An ease-in starts slow and then speeds up.<br/>' +
|
||||
'An ease-out starts fast and then slows to a stop.<br/>' +
|
||||
'An ease-in-out combines the two so that the first half is an ease-in and the second half is an ease-out.',
|
||||
html: '<button id="doBounce">Bounce</button><br/>\n' +
|
||||
'<div><img id="bounce" src="templates/images/puppy.jpg"/></div>',
|
||||
destroy: '$("#doBounce").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Linear easing', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "linear", times: 1}, 2000); });' },
|
||||
{ desc: 'Swing easing', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "swing", times: 1}, 2000); });' },
|
||||
{ desc: 'Quadratic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuad", times: 1}, 2000); });' },
|
||||
{ desc: 'Quadratic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuad", times: 1}, 2000); });' },
|
||||
{ desc: 'Quadratic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuad", times: 1}, 2000); });' },
|
||||
{ desc: 'Cubic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInCubic", times: 1}, 2000); });' },
|
||||
{ desc: 'Cubic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutCubic", times: 1}, 2000); });' },
|
||||
{ desc: 'Cubic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutCubic", times: 1}, 2000); });' },
|
||||
{ desc: 'Quartic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuart", times: 1}, 2000); });' },
|
||||
{ desc: 'Quartic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuart", times: 1}, 2000); });' },
|
||||
{ desc: 'Quartic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuart", times: 1}, 2000); });' },
|
||||
{ desc: 'Quintic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuint", times: 1}, 2000); });' },
|
||||
{ desc: 'Quintic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuint", times: 1}, 2000); });' },
|
||||
{ desc: 'Quintic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuint", times: 1}, 2000); });' },
|
||||
{ desc: 'Sinusoidal ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInSine", times: 1}, 2000); });' },
|
||||
{ desc: 'Sinusoidal ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutSine", times: 1}, 2000); });' },
|
||||
{ desc: 'Sinusoidal ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutSine", times: 1}, 2000); });' },
|
||||
{ desc: 'Exponential ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInExpo", times: 1}, 2000); });' },
|
||||
{ desc: 'Exponential ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutExpo", times: 1}, 2000); });' },
|
||||
{ desc: 'Exponential ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutExpo", times: 1}, 2000); });' },
|
||||
{ desc: 'Circular ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInCirc", times: 1}, 2000); });' },
|
||||
{ desc: 'Circular ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutCirc", times: 1}, 2000); });' },
|
||||
{ desc: 'Circular ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutCirc", times: 1}, 2000); });' },
|
||||
{ desc: 'Elastic ease in (decaying sine wave)', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInElastic", times: 1}, 2000); });' },
|
||||
{ desc: 'Elastic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutElastic", times: 1}, 2000); });' },
|
||||
{ desc: 'Elastic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutElastic", times: 1}, 2000); });' },
|
||||
{ desc: 'Back ease in (overshooting cubic)', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInBack", times: 1}, 2000); });' },
|
||||
{ desc: 'Back ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutBack", times: 1}, 2000); });' },
|
||||
{ desc: 'Back ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutBack", times: 1}, 2000); });' },
|
||||
{ desc: 'Bounce ease in (decaying parabolic)', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInBounce", times: 1}, 2000); });' },
|
||||
{ desc: 'Bounce ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutBounce", times: 1}, 2000); });' },
|
||||
{ desc: 'Bounce ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutBounce", times: 1}, 2000); });' },
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
124
demos/functional/templates/ui.effects.general.html
Normal file
124
demos/functional/templates/ui.effects.general.html
Normal file
@@ -0,0 +1,124 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'General Effects',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Bounce',
|
||||
desc: 'Bounce an element from its original location. The default settings are {times: 5, direction: "up", distance: 20}.',
|
||||
html: '<button id="doBounce">Bounce</button><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="bounce" src="templates/images/P1010036.JPG"/></div>',
|
||||
destroy: '$("#doBounce").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Bounce defaults', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {}, 500); });' },
|
||||
{ desc: 'Bounce three times', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {times: 3}, 500); });' },
|
||||
{ desc: 'Bounce once', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {times: 1}, 500); });' },
|
||||
{ desc: 'Bounce down', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "down"}); });' },
|
||||
{ desc: 'Bounce left', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "left"}); });' },
|
||||
{ desc: 'Bounce right', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "right"}); });' },
|
||||
{ desc: 'Bounce to height 50', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {distance: 50}); });' },
|
||||
{ desc: 'Bounce and show/hide', source: '$("#doBounce").click(function() { $("#bounce").toggle("bounce", {times: 3}, 500); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Highlight',
|
||||
desc: 'Highlight an element by fading its background color from another color back to its original.',
|
||||
html: '<button id="doHighlight">Highlight</button><br/>\n' +
|
||||
'<div id="highlight" style="width: 144px; height: 108px; background-color: #ccffff; text-align: center;"><br/><br/>\n' +
|
||||
'This is an important announcement!</div>',
|
||||
destroy: '$("#doHighlight").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Highlight defaults (yellow)', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {}, 2000); });' },
|
||||
{ desc: 'Highlight to red', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {color: "red"}, 2000); });' },
|
||||
{ desc: 'Highlight to black', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {color: "#000000"}, 2000); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Pulsate',
|
||||
desc: 'Pulsate an element by changing its opacity.',
|
||||
html: '<button id="doPulsate">Pulsate</button><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="pulsate" src="templates/images/P1010061.JPG"/></div>',
|
||||
destroy: '$("#doPulsate").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Pulsate defaults (5 times)', source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {}, 500); });' },
|
||||
{ desc: 'Pulsate 3 times', source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {times: 3}, 500); });' },
|
||||
{ desc: 'Pulsate once', source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {times: 1}, 1000); });' },
|
||||
{ desc: 'Pulsate 3 times and show/hide', source: '$("#doPulsate").click(function() { $("#pulsate").toggle("pulsate", {times: 3}, 500); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Scale',
|
||||
desc: 'Change the size of an element.',
|
||||
html: '<button id="doScale">Scale</button> \n' +
|
||||
'<button onclick="$(\'#scale\').css({width: 144, height: 108});">Reset</button><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="scale" src="templates/images/P1010063.JPG"/></div>',
|
||||
destroy: '$("#doScale").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Scale to 0%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 0}, 2000); });' },
|
||||
{ desc: 'Scale to 50%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 50}, 2000); });' },
|
||||
{ desc: 'Scale to 200%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 200}, 2000); });' },
|
||||
{ desc: 'Scale vertically only', source: '$("#doScale").click(function() { $("#scale").effect("scale", {direction: "vertical", percent: 150}, 2000); });' },
|
||||
{ desc: 'Scale horizontally only', source: '$("#doScale").click(function() { $("#scale").effect("scale", {direction: "horizontal", percent: 150}, 2000); });' },
|
||||
{ desc: 'Scale from middle-center', source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["middle", "center"], percent: 150}, 2000); });' },
|
||||
{ desc: 'Scale from bottom-right', source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["bottom", "right"], percent: 50}, 2000); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Shake',
|
||||
desc: 'Shake an element around.',
|
||||
html: '<button id="doShake">Shake</button><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="shake" src="templates/images/P1010039.JPG"/></div>',
|
||||
destroy: '$("#doShake").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Shake defaults', source: '$("#doShake").click(function() { $("#shake").effect("shake", {}, 300); });' },
|
||||
{ desc: 'Shake 5 times', source: '$("#doShake").click(function() { $("#shake").effect("shake", {times: 5}, 250); });' },
|
||||
{ desc: 'Shake right', source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "right"}, 250); });' },
|
||||
{ desc: 'Shake up', source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "up"}, 250); });' },
|
||||
{ desc: 'Shake down', source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "down"}, 250); });' },
|
||||
{ desc: 'Shake by 50px', source: '$("#doShake").click(function() { $("#shake").effect("shake", {distance: 50}, 250); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Transfer',
|
||||
desc: 'Transfer the outline of one element to another.',
|
||||
html: '<button id="doTransfer">Transfer</button><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="transfer" src="templates/images/P1010044.JPG"/></div>\n' +
|
||||
'<div id="target" style="margin: 20px 0px 0px 36px; width: 72px; height: 54px; border: 1px solid black;"></div>\n' +
|
||||
'<style type="text/css">\n' +
|
||||
'.ui-effects-transfer { border: 1px solid maroon; }\n' +
|
||||
'.transferring { background-color: red; opacity: 0.5; }\n' +
|
||||
'</style>',
|
||||
destroy: '$("#doTransfer").unbind(); $("#target").removeClass("transferred");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Transfer default', source: '$("#doTransfer").click(function() { $("#transfer").effect("transfer", {to: "#target"}, 2000); });' },
|
||||
{ desc: 'Transfer with extra class', source: '$("#doTransfer").click(function() { $("#transfer").effect("transfer", {to: "#target", className: "transferring"}, 2000); });' }
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
120
demos/functional/templates/ui.effects.showhide.html
Normal file
120
demos/functional/templates/ui.effects.showhide.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Show/Hide Effects',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Blind',
|
||||
desc: 'Gradually show or hide an element.',
|
||||
html: '<button id="doBlind">Toggle</button><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="blind" src="templates/images/P1010020.JPG"/></div>',
|
||||
destroy: '$("#doBlind").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Vertical blind', source: '$("#doBlind").click(function() { $("#blind").toggle("blind", {direction: "vertical"}, 2000); });' },
|
||||
{ desc: 'Horizontal blind', source: '$("#doBlind").click(function() { $("#blind").toggle("blind", {direction: "horizontal"}, 2000); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Clip',
|
||||
desc: 'Gradually show or hide an element by expanding from or to the center.',
|
||||
html: '<button id="doClip">Toggle</button><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="clip" src="templates/images/P1010039.JPG"/></div>',
|
||||
destroy: '$("#doClip").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Vertical clip', source: '$("#doClip").click(function() { $("#clip").toggle("clip", {direction: "vertical"}, 2000); });' },
|
||||
{ desc: 'Horizontal clip', source: '$("#doClip").click(function() { $("#clip").toggle("clip", {direction: "horizontal"}, 2000); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Drop',
|
||||
desc: 'Gradually show or hide an element by dropping it to one side and fading it.',
|
||||
html: '<button id="doDrop">Toggle</button><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="drop" src="templates/images/P1010044.JPG"/></div>',
|
||||
destroy: '$("#doDrop").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Drop left', source: '$("#doDrop").click(function() { $("#drop").toggle("drop", {direction: "left"}, 2000); });' },
|
||||
{ desc: 'Drop right', source: '$("#doDrop").click(function() { $("#drop").toggle("drop", {direction: "right"}, 2000); });' },
|
||||
{ desc: 'Drop up', source: '$("#doDrop").click(function() { $("#drop").toggle("drop", {direction: "up"}, 2000); });' },
|
||||
{ desc: 'Drop down', source: '$("#doDrop").click(function() { $("#drop").toggle("drop", {direction: "down"}, 2000); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Explode',
|
||||
desc: 'Break an element into pieces and explode them away, or reassemble an element from pieces.',
|
||||
html: '<button id="doExplode">Toggle</button><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="explode" src="templates/images/P1010050.JPG"/></div>',
|
||||
destroy: '$("#doExplode").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Explode defaults (9 pieces)', source: '$("#doExplode").click(function() { $("#explode").toggle("explode", {}, 2000); });' },
|
||||
{ desc: 'Explode into 4 pieces', source: '$("#doExplode").click(function() { $("#explode").toggle("explode", {pieces: 4}, 2000); });' },
|
||||
{ desc: 'Explode into 25 pieces', source: '$("#doExplode").click(function() { $("#explode").toggle("explode", {pieces: 25}, 2000); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Fold',
|
||||
desc: 'Reduce or enlarge an element partially in one direction and then fully in the other direction.',
|
||||
html: '<button id="doFold">Toggle</button><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="fold" src="templates/images/P1010055.JPG"/></div>',
|
||||
destroy: '$("#doFold").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Fold defaults (to size 15)', source: '$("#doFold").click(function() { $("#fold").toggle("fold", {}, 2000); });' },
|
||||
{ desc: 'Fold to 30', source: '$("#doFold").click(function() { $("#fold").toggle("fold", {size: 30}, 2000); });' },
|
||||
{ desc: 'Fold in half (50%)', source: '$("#doFold").click(function() { $("#fold").toggle("fold", {size: "50%"}, 2000); });' },
|
||||
{ desc: 'Fold horizontally first', source: '$("#doFold").click(function() { $("#fold").toggle("fold", {size: 30, horizFirst: true}, 2000); });' },
|
||||
{ desc: 'Fold in half horizontally first', source: '$("#doFold").click(function() { $("#fold").toggle("fold", {size: "50%", horizFirst: true}, 2000); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Puff',
|
||||
desc: 'Scale an element up and fade out, or scale it down and fade in.',
|
||||
html: '<button id="doPuff">Toggle</button><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="puff" src="templates/images/P1010058.JPG"/></div>',
|
||||
destroy: '$("#doPuff").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Puff defaults (scale to 150%)', source: '$("#doPuff").click(function() { $("#puff").toggle("puff", {}, 2000); });' },
|
||||
{ desc: 'Puff to 200%', source: '$("#doPuff").click(function() { $("#puff").toggle("puff", {percent: 200}, 2000); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Slide',
|
||||
desc: 'Slide an element out of or into the viewport.',
|
||||
html: '<button id="doSlide">Toggle</button><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="slide" src="templates/images/P1010059.JPG"/></div>',
|
||||
destroy: '$("#doSlide").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Slide left', source: '$("#doSlide").click(function() { $("#slide").toggle("slide", {direction: "left"}, 2000); });' },
|
||||
{ desc: 'Slide right', source: '$("#doSlide").click(function() { $("#slide").toggle("slide", {direction: "right"}, 2000); });' },
|
||||
{ desc: 'Slide up', source: '$("#doSlide").click(function() { $("#slide").toggle("slide", {direction: "up"}, 2000); });' },
|
||||
{ desc: 'Slide down', source: '$("#doSlide").click(function() { $("#slide").toggle("slide", {direction: "down"}, 2000); });' }
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user