--- /dev/null
+$(document).ready(function() {\r
+ \r
+ $("div.effect")\r
+ .hover(function() {\r
+ $(this).addClass("hover");\r
+ }, function() {\r
+ $(this).removeClass("hover");\r
+ })\r
+ ;\r
+ \r
+ \r
+ var effect = function(el, n, o) {\r
+ \r
+ $.extend(o, {\r
+ easing: "easeOutQuint"\r
+ });\r
+ \r
+ $(el).bind("click", function() {\r
+ \r
+ $(this).addClass("current").hide(n, o, 1000, function() {\r
+ var self = this;\r
+ window.setTimeout(function() {\r
+ $(self).show(n, o, 1000, function() { $(this).removeClass("current"); });\r
+ },500);\r
+ });\r
+ });\r
+ \r
+ };\r
+ \r
+\r
+ effect("#blindHorizontally", "blind", { direction: "horizontal" });\r
+ effect("#blindVertically", "blind", { direction: "vertical" });\r
+ \r
+ effect("#bounce3times", "bounce", { times: 3 });\r
+ \r
+ effect("#clipHorizontally", "clip", { direction: "horizontal" });\r
+ effect("#clipVertically", "clip", { direction: "vertical" });\r
+ \r
+ effect("#dropDown", "drop", { direction: "down" });\r
+ effect("#dropUp", "drop", { direction: "up" });\r
+ effect("#dropLeft", "drop", { direction: "left" });\r
+ effect("#dropRight", "drop", { direction: "right" });\r
+ \r
+ effect("#explode9", "explode", { });\r
+ effect("#explode36", "explode", { pieces: 36 });\r
+ \r
+ effect("#fold", "fold", { size: 50 });\r
+ \r
+ effect("#highlight", "highlight", { });\r
+ \r
+ effect("#pulsate", "pulsate", { times: 2 });\r
+ \r
+ effect("#puff", "puff", { times: 2 });\r
+ effect("#scale", "scale", { });\r
+ \r
+ $("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); });\r
+ \r
+ effect("#slideDown", "slide", { direction: "down" });\r
+ effect("#slideUp", "slide", { direction: "up" });\r
+ effect("#slideLeft", "slide", { direction: "left" });\r
+ effect("#slideRight", "slide", { direction: "right" });\r
+ \r
+ $("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); });\r
+ \r
+});
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"\r
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\r
+<html>\r
+ <head>\r
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />\r
+ <title>Effects Test Suite</title>\r
+ <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8" />\r
+ \r
+ <script type="text/javascript" src="../../../../jquery/jquery-1.2.6.js"></script>\r
+ <script type="text/javascript" src="../../../source/effects.core.js"></script>\r
+ \r
+ <script type="text/javascript" src="../../../source/effects.blind.js"></script>\r
+ <script type="text/javascript" src="../../../source/effects.bounce.js"></script>\r
+ <script type="text/javascript" src="../../../source/effects.clip.js"></script>\r
+ <script type="text/javascript" src="../../../source/effects.drop.js"></script>\r
+ <script type="text/javascript" src="../../../source/effects.explode.js"></script>\r
+ <script type="text/javascript" src="../../../source/effects.fold.js"></script>\r
+ <script type="text/javascript" src="../../../source/effects.highlight.js"></script>\r
+ <script type="text/javascript" src="../../../source/effects.pulsate.js"></script>\r
+ <script type="text/javascript" src="../../../source/effects.scale.js"></script>\r
+ <script type="text/javascript" src="../../../source/effects.shake.js"></script>\r
+ <script type="text/javascript" src="../../../source/effects.slide.js"></script>\r
+ <script type="text/javascript" src="../../../source/effects.transfer.js"></script>\r
+ \r
+ <script type="text/javascript" src="demo.js"></script>\r
+ \r
+\r
+ </head>\r
+ <body>\r
+ \r
+ <div class="effect" id="blindHorizontally">\r
+ <p>Blind horizontally</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="blindVertically">\r
+ <p>Blind vertically</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="bounce3times">\r
+ <p>Bounce 3 times</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="clipHorizontally">\r
+ <p>Clip horizontally</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="clipVertically">\r
+ <p>Clip vertically</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="dropDown">\r
+ <p>Drop down</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="dropUp">\r
+ <p>Drop up</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="dropLeft">\r
+ <p>Drop left</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="dropRight">\r
+ <p>Drop right</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="explode9">\r
+ <p>Explode in 9 pieces</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="explode36">\r
+ <p>Explode in 36 pieces</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="fold">\r
+ <p>Fold</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="highlight">\r
+ <p>Highlight</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="pulsate">\r
+ <p>Pulsate 2 times</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="puff">\r
+ <p>Puff</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="scale">\r
+ <p>Scale</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="shake">\r
+ <p>Shake</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="slideDown">\r
+ <p>Slide down</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="slideUp">\r
+ <p>Slide up</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="slideLeft">\r
+ <p>Slide left</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="slideRight">\r
+ <p>Slide right</p>\r
+ </div>\r
+ \r
+ <div class="effect" id="transfer">\r
+ <p>Transfer to first element</p>\r
+ </div>\r
+ \r
+ </body>\r
+</html>
\ No newline at end of file
--- /dev/null
+body,html {\r
+ margin: 0;\r
+ padding: 0;\r
+ font-size: 12px;\r
+ font-family: Arial;\r
+ background: #000;\r
+}\r
+\r
+div.effect {\r
+ width: 120px;\r
+ height: 100px;\r
+ background: #333;\r
+ border: 5px outset #aaa;\r
+ float: left;\r
+ margin-top: 20px;\r
+ margin-left: 20px;\r
+ cursor: pointer;\r
+ cursor: hand;\r
+}\r
+\r
+div.current {\r
+ border: 5px outset #FF0000;\r
+ background: #660000;\r
+}\r
+\r
+div.effect p {\r
+ color: #eee;\r
+ margin: 0px;\r
+ padding: 10px;\r
+}\r
+\r
+.ui-effects-transfer {\r
+ border: 1px dotted #fff;\r
+ background: #666;\r
+ opacity: 0.5;\r
+}
\ No newline at end of file
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();
});
o.options.mode = o.options.mode == 'toggle' ? ($(this).is(':visible') ? 'hide' : 'show') : o.options.mode;\r
var el = $(this).show().css('visibility', 'hidden');\r
var offset = el.offset();\r
- var width = el.outerWidth();\r
- var height = el.outerHeight();\r
+ \r
+ //Substract the margins - not fixing the problem yet.\r
+ offset.top -= parseInt(el.css("marginTop")) || 0;\r
+ offset.left -= parseInt(el.css("marginLeft")) || 0;\r
+ \r
+ var width = el.outerWidth(true);\r
+ var height = el.outerHeight(true);\r
\r
for(var i=0;i<rows;i++) { // =\r
for(var j=0;j<cells;j++) { // ||\r
+++ /dev/null
-;(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
.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();
});
// Set options\r
var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode\r
var target = $(o.options.to); // Find Target\r
- var position = el.position();\r
- var transfer = $('<div id="fxTransfer"></div>').appendTo(document.body)\r
+ var position = el.offset();\r
+ var transfer = $('<div class="ui-effects-transfer"></div>').appendTo(document.body);\r
\r
// Set target css\r
transfer.addClass(o.options.className);\r
transfer.css({\r
- top: position['top'],\r
- left: position['left'],\r
- height: el.outerHeight({margin:true}) - parseInt(transfer.css('borderTopWidth')) - parseInt(transfer.css('borderBottomWidth')),\r
- width: el.outerWidth({margin:true}) - parseInt(transfer.css('borderLeftWidth')) - parseInt(transfer.css('borderRightWidth')),\r
+ top: position.top,\r
+ left: position.left,\r
+ height: el.outerHeight(true) - parseInt(transfer.css('borderTopWidth')) - parseInt(transfer.css('borderBottomWidth')),\r
+ width: el.outerWidth(true) - parseInt(transfer.css('borderLeftWidth')) - parseInt(transfer.css('borderRightWidth')),\r
position: 'absolute'\r
});\r
\r
// Animation\r
- position = target.position();\r
+ position = target.offset();\r
animation = {\r
- top: position['top'],\r
- left: position['left'],\r
+ top: position.top,\r
+ left: position.top,\r
height: target.outerHeight() - parseInt(transfer.css('borderTopWidth')) - parseInt(transfer.css('borderBottomWidth')),\r
width: target.outerWidth() - parseInt(transfer.css('borderLeftWidth')) - parseInt(transfer.css('borderRightWidth'))\r
};\r
// Animate\r
transfer.animate(animation, o.duration, o.options.easing, function() {\r
transfer.remove(); // Remove div\r
- if(o.callback) o.callback.apply(this, arguments); // Callback\r
+ if(o.callback) o.callback.apply(el[0], arguments); // Callback\r
el.dequeue();\r
}); \r
\r
projects / jquery-ui.git / commitdiff