diff options
| -rw-r--r-- | ui/demos/real-world/effects/demo.js | 65 | ||||
| -rw-r--r-- | ui/demos/real-world/effects/index.html | 120 | ||||
| -rw-r--r-- | ui/demos/real-world/effects/style.css | 36 | ||||
| -rw-r--r-- | ui/source/effects.blind.js | 2 | ||||
| -rw-r--r-- | ui/source/effects.explode.js | 9 | ||||
| -rw-r--r-- | ui/source/effects.fade.js | 35 | ||||
| -rw-r--r-- | ui/source/effects.fold.js | 2 | ||||
| -rw-r--r-- | ui/source/effects.transfer.js | 20 |
8 files changed, 240 insertions, 49 deletions
diff --git a/ui/demos/real-world/effects/demo.js b/ui/demos/real-world/effects/demo.js new file mode 100644 index 000000000..ebf0ad082 --- /dev/null +++ b/ui/demos/real-world/effects/demo.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"); }); });
+
+});
\ No newline at end of file diff --git a/ui/demos/real-world/effects/index.html b/ui/demos/real-world/effects/index.html new file mode 100644 index 000000000..bffad1746 --- /dev/null +++ b/ui/demos/real-world/effects/index.html @@ -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>
\ No newline at end of file diff --git a/ui/demos/real-world/effects/style.css b/ui/demos/real-world/effects/style.css new file mode 100644 index 000000000..e2a184466 --- /dev/null +++ b/ui/demos/real-world/effects/style.css @@ -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;
+}
\ No newline at end of file diff --git a/ui/source/effects.blind.js b/ui/source/effects.blind.js index 1681ae286..324864300 100644 --- a/ui/source/effects.blind.js +++ b/ui/source/effects.blind.js @@ -26,7 +26,7 @@ wrapper.animate(animation, o.duration, o.options.easing, function() { if(mode == 'hide') el.hide(); // Hide $.effects.restore(el, props); $.effects.removeWrapper(el); // Restore - if(o.callback) o.callback.apply(this, arguments); // Callback + if(o.callback) o.callback.apply(el[0], arguments); // Callback el.dequeue(); }); diff --git a/ui/source/effects.explode.js b/ui/source/effects.explode.js index 4962c5d93..78d37e7ff 100644 --- a/ui/source/effects.explode.js +++ b/ui/source/effects.explode.js @@ -10,8 +10,13 @@ o.options.mode = o.options.mode == 'toggle' ? ($(this).is(':visible') ? 'hide' : 'show') : o.options.mode;
var el = $(this).show().css('visibility', 'hidden');
var offset = el.offset();
- var width = el.outerWidth();
- var height = el.outerHeight();
+
+ //Substract the margins - not fixing the problem yet.
+ offset.top -= parseInt(el.css("marginTop")) || 0;
+ offset.left -= parseInt(el.css("marginLeft")) || 0;
+
+ var width = el.outerWidth(true);
+ var height = el.outerHeight(true);
for(var i=0;i<rows;i++) { // =
for(var j=0;j<cells;j++) { // ||
diff --git a/ui/source/effects.fade.js b/ui/source/effects.fade.js deleted file mode 100644 index 2d265bfc5..000000000 --- a/ui/source/effects.fade.js +++ /dev/null @@ -1,35 +0,0 @@ -;(function($) { - - $.effects.fade = function(o) { - - return this.queue(function() { - - // Create element - var el = $(this), props = ['opacity']; - - // Set options - var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode - if (mode == 'toggle') mode = el.is(':hidden') ? 'show' : 'hide'; // Set for toggle - var opacity = o.options.opacity || 0; // Default fade opacity - var original_opacity = el.css('opacity'); - - // Adjust - $.effects.save(el, props); el.show(); // Save & Show - if(mode == 'show') el.css({opacity: 0}); // Shift - - // Animation - var animation = {opacity: mode == 'show' ? original_opacity : opacity}; - - // Animate - el.animate(animation, { queue: false, duration: o.duration, easing: o.options.easing, complete: function() { - if(mode == 'hide') el.hide(); // Hide - if(mode == 'hide') $.effects.restore(el, props); // Restore - if(o.callback) o.callback.apply(this, arguments); // Callback - el.dequeue(); - }}); - - }); - - }; - -})(jQuery);
\ No newline at end of file diff --git a/ui/source/effects.fold.js b/ui/source/effects.fold.js index f2738c2aa..a57593d8c 100644 --- a/ui/source/effects.fold.js +++ b/ui/source/effects.fold.js @@ -28,7 +28,7 @@ .animate(animation2, o.duration / 2, o.options.easing, function() { if(mode == 'hide') el.hide(); // Hide $.effects.restore(el, props); $.effects.removeWrapper(el); // Restore - if(o.callback) o.callback.apply(this, arguments); // Callback + if(o.callback) o.callback.apply(el[0], arguments); // Callback el.dequeue(); }); diff --git a/ui/source/effects.transfer.js b/ui/source/effects.transfer.js index f83700c0d..c2a26128a 100644 --- a/ui/source/effects.transfer.js +++ b/ui/source/effects.transfer.js @@ -10,24 +10,24 @@ // Set options
var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode
var target = $(o.options.to); // Find Target
- var position = el.position();
- var transfer = $('<div id="fxTransfer"></div>').appendTo(document.body)
+ var position = el.offset();
+ var transfer = $('<div class="ui-effects-transfer"></div>').appendTo(document.body);
// Set target css
transfer.addClass(o.options.className);
transfer.css({
- top: position['top'],
- left: position['left'],
- height: el.outerHeight({margin:true}) - parseInt(transfer.css('borderTopWidth')) - parseInt(transfer.css('borderBottomWidth')),
- width: el.outerWidth({margin:true}) - parseInt(transfer.css('borderLeftWidth')) - parseInt(transfer.css('borderRightWidth')),
+ top: position.top,
+ left: position.left,
+ height: el.outerHeight(true) - parseInt(transfer.css('borderTopWidth')) - parseInt(transfer.css('borderBottomWidth')),
+ width: el.outerWidth(true) - parseInt(transfer.css('borderLeftWidth')) - parseInt(transfer.css('borderRightWidth')),
position: 'absolute'
});
// Animation
- position = target.position();
+ position = target.offset();
animation = {
- top: position['top'],
- left: position['left'],
+ top: position.top,
+ left: position.top,
height: target.outerHeight() - parseInt(transfer.css('borderTopWidth')) - parseInt(transfer.css('borderBottomWidth')),
width: target.outerWidth() - parseInt(transfer.css('borderLeftWidth')) - parseInt(transfer.css('borderRightWidth'))
};
@@ -35,7 +35,7 @@ // Animate
transfer.animate(animation, o.duration, o.options.easing, function() {
transfer.remove(); // Remove div
- if(o.callback) o.callback.apply(this, arguments); // Callback
+ if(o.callback) o.callback.apply(el[0], arguments); // Callback
el.dequeue();
});
|