mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
effects: removed effect 'fade' (honestly not needed)
demos: added effects demo page effects: fixed many callback issues and other small issues
This commit is contained in:
Paul Bakaus
parent
dd096c1e95
commit
3fd0d70dee
65
ui/demos/real-world/effects/demo.js
Normal file
65
ui/demos/real-world/effects/demo.js
Normal file
@ -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"); }); });
|
||||
|
||||
});
|
||||
120
ui/demos/real-world/effects/index.html
Normal file
120
ui/demos/real-world/effects/index.html
Normal file
@ -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>
|
||||
36
ui/demos/real-world/effects/style.css
Normal file
36
ui/demos/real-world/effects/style.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
|
||||
|
||||
@ -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++) { // ||
|
||||
|
||||
@ -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);
|
||||
@ -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();
|
||||
});
|
||||
|
||||
|
||||
@ -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();
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user