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 @@ + + + + + Effects Test Suite + + + + + + + + + + + + + + + + + + + + + + + + +
+

Blind horizontally

+
+ +
+

Blind vertically

+
+ +
+

Bounce 3 times

+
+ +
+

Clip horizontally

+
+ +
+

Clip vertically

+
+ + + +
+

Drop up

+
+ +
+

Drop left

+
+ +
+

Drop right

+
+ +
+

Explode in 9 pieces

+
+ +
+

Explode in 36 pieces

+
+ +
+

Fold

+
+ +
+

Highlight

+
+ +
+

Pulsate 2 times

+
+ +
+

Puff

+
+ +
+

Scale

+
+ +
+

Shake

+
+ +
+

Slide down

+
+ +
+

Slide up

+
+ +
+

Slide left

+
+ +
+

Slide right

+
+ +
+

Transfer to first element

+
+ + + \ 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').appendTo(document.body) + var position = el.offset(); + var transfer = $('
').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(); });