Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
effects: removed effect 'fade' (honestly not needed)
demos: added effects demo page effects: fixed many callback issues and other small issues
- Loading branch information
Showing
with
240 additions
and 49 deletions.
- +65 −0 ui/demos/real-world/effects/demo.js
- +120 −0 ui/demos/real-world/effects/index.html
- +36 −0 ui/demos/real-world/effects/style.css
- +1 −1 ui/source/effects.blind.js
- +7 −2 ui/source/effects.explode.js
- +0 −35 ui/source/effects.fade.js
- +1 −1 ui/source/effects.fold.js
- +10 −10 ui/source/effects.transfer.js
@@ -0,0 +1,65 @@ | ||
$(document).ready(function() { | ||
|
||
$("div.effect") | ||
.hover(function() { | ||
$(this).addClass("hover"); | ||
}, function() { | ||
$(this).removeClass("hover"); | ||
}) | ||
; | ||
|
||
|
||
var effect = function(el, n, o) { | ||
|
||
$.extend(o, { | ||
easing: "easeOutQuint" | ||
}); | ||
|
||
$(el).bind("click", function() { | ||
|
||
$(this).addClass("current").hide(n, o, 1000, function() { | ||
var self = this; | ||
window.setTimeout(function() { | ||
$(self).show(n, o, 1000, function() { $(this).removeClass("current"); }); | ||
},500); | ||
}); | ||
}); | ||
|
||
}; | ||
|
||
|
||
effect("#blindHorizontally", "blind", { direction: "horizontal" }); | ||
effect("#blindVertically", "blind", { direction: "vertical" }); | ||
|
||
effect("#bounce3times", "bounce", { times: 3 }); | ||
|
||
effect("#clipHorizontally", "clip", { direction: "horizontal" }); | ||
effect("#clipVertically", "clip", { direction: "vertical" }); | ||
|
||
effect("#dropDown", "drop", { direction: "down" }); | ||
effect("#dropUp", "drop", { direction: "up" }); | ||
effect("#dropLeft", "drop", { direction: "left" }); | ||
effect("#dropRight", "drop", { direction: "right" }); | ||
|
||
effect("#explode9", "explode", { }); | ||
effect("#explode36", "explode", { pieces: 36 }); | ||
|
||
effect("#fold", "fold", { size: 50 }); | ||
|
||
effect("#highlight", "highlight", { }); | ||
|
||
effect("#pulsate", "pulsate", { times: 2 }); | ||
|
||
effect("#puff", "puff", { times: 2 }); | ||
effect("#scale", "scale", { }); | ||
|
||
$("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); }); | ||
|
||
effect("#slideDown", "slide", { direction: "down" }); | ||
effect("#slideUp", "slide", { direction: "up" }); | ||
effect("#slideLeft", "slide", { direction: "left" }); | ||
effect("#slideRight", "slide", { direction: "right" }); | ||
|
||
$("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); }); | ||
|
||
}); |
@@ -0,0 +1,120 @@ | ||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" | ||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | ||
<html> | ||
<head> | ||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> | ||
<title>Effects Test Suite</title> | ||
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8" /> | ||
|
||
<script type="text/javascript" src="../../../../jquery/jquery-1.2.6.js"></script> | ||
<script type="text/javascript" src="../../../source/effects.core.js"></script> | ||
|
||
<script type="text/javascript" src="../../../source/effects.blind.js"></script> | ||
<script type="text/javascript" src="../../../source/effects.bounce.js"></script> | ||
<script type="text/javascript" src="../../../source/effects.clip.js"></script> | ||
<script type="text/javascript" src="../../../source/effects.drop.js"></script> | ||
<script type="text/javascript" src="../../../source/effects.explode.js"></script> | ||
<script type="text/javascript" src="../../../source/effects.fold.js"></script> | ||
<script type="text/javascript" src="../../../source/effects.highlight.js"></script> | ||
<script type="text/javascript" src="../../../source/effects.pulsate.js"></script> | ||
<script type="text/javascript" src="../../../source/effects.scale.js"></script> | ||
<script type="text/javascript" src="../../../source/effects.shake.js"></script> | ||
<script type="text/javascript" src="../../../source/effects.slide.js"></script> | ||
<script type="text/javascript" src="../../../source/effects.transfer.js"></script> | ||
|
||
<script type="text/javascript" src="demo.js"></script> | ||
|
||
|
||
</head> | ||
<body> | ||
|
||
<div class="effect" id="blindHorizontally"> | ||
<p>Blind horizontally</p> | ||
</div> | ||
|
||
<div class="effect" id="blindVertically"> | ||
<p>Blind vertically</p> | ||
</div> | ||
|
||
<div class="effect" id="bounce3times"> | ||
<p>Bounce 3 times</p> | ||
</div> | ||
|
||
<div class="effect" id="clipHorizontally"> | ||
<p>Clip horizontally</p> | ||
</div> | ||
|
||
<div class="effect" id="clipVertically"> | ||
<p>Clip vertically</p> | ||
</div> | ||
|
||
<div class="effect" id="dropDown"> | ||
<p>Drop down</p> | ||
</div> | ||
|
||
<div class="effect" id="dropUp"> | ||
<p>Drop up</p> | ||
</div> | ||
|
||
<div class="effect" id="dropLeft"> | ||
<p>Drop left</p> | ||
</div> | ||
|
||
<div class="effect" id="dropRight"> | ||
<p>Drop right</p> | ||
</div> | ||
|
||
<div class="effect" id="explode9"> | ||
<p>Explode in 9 pieces</p> | ||
</div> | ||
|
||
<div class="effect" id="explode36"> | ||
<p>Explode in 36 pieces</p> | ||
</div> | ||
|
||
<div class="effect" id="fold"> | ||
<p>Fold</p> | ||
</div> | ||
|
||
<div class="effect" id="highlight"> | ||
<p>Highlight</p> | ||
</div> | ||
|
||
<div class="effect" id="pulsate"> | ||
<p>Pulsate 2 times</p> | ||
</div> | ||
|
||
<div class="effect" id="puff"> | ||
<p>Puff</p> | ||
</div> | ||
|
||
<div class="effect" id="scale"> | ||
<p>Scale</p> | ||
</div> | ||
|
||
<div class="effect" id="shake"> | ||
<p>Shake</p> | ||
</div> | ||
|
||
<div class="effect" id="slideDown"> | ||
<p>Slide down</p> | ||
</div> | ||
|
||
<div class="effect" id="slideUp"> | ||
<p>Slide up</p> | ||
</div> | ||
|
||
<div class="effect" id="slideLeft"> | ||
<p>Slide left</p> | ||
</div> | ||
|
||
<div class="effect" id="slideRight"> | ||
<p>Slide right</p> | ||
</div> | ||
|
||
<div class="effect" id="transfer"> | ||
<p>Transfer to first element</p> | ||
</div> | ||
|
||
</body> | ||
</html> |
@@ -0,0 +1,36 @@ | ||
body,html { | ||
margin: 0; | ||
padding: 0; | ||
font-size: 12px; | ||
font-family: Arial; | ||
background: #000; | ||
} | ||
|
||
div.effect { | ||
width: 120px; | ||
height: 100px; | ||
background: #333; | ||
border: 5px outset #aaa; | ||
float: left; | ||
margin-top: 20px; | ||
margin-left: 20px; | ||
cursor: pointer; | ||
cursor: hand; | ||
} | ||
|
||
div.current { | ||
border: 5px outset #FF0000; | ||
background: #660000; | ||
} | ||
|
||
div.effect p { | ||
color: #eee; | ||
margin: 0px; | ||
padding: 10px; | ||
} | ||
|
||
.ui-effects-transfer { | ||
border: 1px dotted #fff; | ||
background: #666; | ||
opacity: 0.5; | ||
} |