Skip to content

Commit 3875cf6

Browse files
scottgonzalezscottgonzalez
committed
Merge branch 'effects-api' of https://github.com/gnarf37/jquery-ui into gnarf37-effects-api
2 parents fa7f5d2 + 74cff5d commit 3875cf6

16 files changed

+925
-675
lines changed

‎tests/visual/effects.all.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script>
1212
<script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script>
1313
<script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
14+
<script type="text/javascript" src="../../ui/jquery.effects.fade.js"></script>
1415
<script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script>
1516
<script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script>
1617
<script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script>
@@ -90,6 +91,12 @@
9091
</div>
9192
</li>
9293

94+
<li>
95+
<div class="effect" id="fade">
96+
<p>Fade</p>
97+
</div>
98+
</li>
99+
93100
<li>
94101
<div class="effect" id="fold">
95102
<p>Fold</p>
@@ -174,6 +181,12 @@
174181
</div>
175182
</li>
176183

184+
<li>
185+
<div class="effect" id="hide">
186+
<p>hide/show (jQuery)</p>
187+
</div>
188+
</li>
189+
177190
</ul>
178191

179192
</body>

‎tests/visual/effects.all.js

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
$(function() {
3+
var duration = 1000, wait = 500;
34

45
$("div.effect")
56
.hover(function() { $(this).addClass("hover"); },
@@ -13,15 +14,24 @@ $(function() {
1314

1415
$(el).bind("click", function() {
1516

16-
$(this).addClass("current").hide(n, o, 1000, function() {
17+
$(this).addClass("current").hide(n, o, duration, function() {
1718
var self = this;
1819
window.setTimeout(function() {
19-
$(self).show(n, o, 1000, function() { $(this).removeClass("current"); });
20-
},500);
20+
$(self).show(n, o, duration, function() { $(this).removeClass("current"); });
21+
}, wait);
2122
});
2223
});
2324

2425
};
26+
27+
$("#hide").click(function() {
28+
var el = $(this);
29+
el.addClass("current").hide(duration, function() {
30+
setTimeout(function() {
31+
el.show(duration, function() { el.removeClass("current") });
32+
}, wait);
33+
})
34+
})
2535

2636
effect("#blindHorizontally", "blind", { direction: "horizontal" });
2737
effect("#blindVertically", "blind", { direction: "vertical" });
@@ -39,6 +49,8 @@ $(function() {
3949
effect("#explode9", "explode", {});
4050
effect("#explode36", "explode", { pieces: 36 });
4151

52+
effect("#fade", "fade", {});
53+
4254
effect("#fold", "fold", { size: 50 });
4355

4456
effect("#highlight", "highlight", {});
@@ -61,20 +73,20 @@ $(function() {
6173
$(this).addClass(function() {
6274
window.console && console.log(arguments);
6375
return "current";
64-
}, 1000, function() {
76+
}, duration, function() {
6577
$(this).removeClass("current");
6678
});
6779
});
6880
$("#removeClass").click(function() {
6981
$(this).addClass("current").removeClass(function() {
7082
window.console && console.log(arguments);
7183
return "current"
72-
}, 1000);
84+
}, duration);
7385
});
7486
$("#toggleClass").click(function() {
7587
$(this).toggleClass(function() {
7688
window.console && console.log(arguments);
7789
return "current"
78-
}, 1000);
90+
}, duration);
7991
});
8092
});

‎ui/jquery.effects.blind.js

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,33 +12,36 @@
1212
*/
1313
(function( $, undefined ) {
1414

15-
$.effects.blind = function(o) {
15+
$.effects.blind = function( o ) {
1616

17-
return this.queue(function() {
17+
return this.queue( function() {
1818

1919
// Create element
20-
var el = $(this), props = ['position','top','bottom','left','right'];
21-
22-
// Set options
23-
var mode = $.effects.setMode(el, o.options.mode || 'hide'); // Set Mode
24-
var direction = o.options.direction || 'vertical'; // Default direction
20+
var el = $( this ),
21+
props = [ 'position', 'top', 'bottom', 'left', 'right' ],
22+
mode = $.effects.setMode( el, o.mode || 'hide' ),
23+
direction = o.direction || 'vertical',
24+
ref = ( direction == 'vertical' ) ? 'height' : 'width',
25+
animation = {},
26+
wrapper, distance;
27+
28+
$.effects.save( el, props );
29+
el.show();
30+
wrapper = $.effects.createWrapper( el ).css({
31+
overflow: 'hidden'
32+
});
2533

26-
// Adjust
27-
$.effects.save(el, props); el.show(); // Save & Show
28-
var wrapper = $.effects.createWrapper(el).css({overflow:'hidden'}); // Create Wrapper
29-
var ref = (direction == 'vertical') ? 'height' : 'width';
30-
var distance = (direction == 'vertical') ? wrapper.height() : wrapper.width();
31-
if(mode == 'show') wrapper.css(ref, 0); // Shift
34+
animation[ ref ] = ( mode == 'show' ? wrapper[ ref ]() : 0 );
3235

33-
// Animation
34-
var animation = {};
35-
animation[ref] = mode == 'show' ? distance : 0;
36+
// start at 0 if we are showing
37+
( mode == 'show' && wrapper.css( ref, 0 ) );
3638

3739
// Animate
38-
wrapper.animate(animation, o.duration, o.options.easing, function() {
39-
if(mode == 'hide') el.hide(); // Hide
40-
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
41-
if(o.callback) o.callback.apply(el[0], arguments); // Callback
40+
wrapper.animate( animation, o.duration, o.easing, function() {
41+
( mode == 'hide' && el.hide() );
42+
$.effects.restore( el, props );
43+
$.effects.removeWrapper( el );
44+
$.isFunction( o.complete ) && o.complete.apply( el[ 0 ], arguments );
4245
el.dequeue();
4346
});
4447

‎ui/jquery.effects.bounce.js

Lines changed: 68 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -12,64 +12,88 @@
1212
*/
1313
(function( $, undefined ) {
1414

15+
var rshowhide = /show|hide/;
16+
1517
$.effects.bounce = function(o) {
1618

1719
return this.queue(function() {
1820

1921
// Create element
20-
var el = $(this), props = ['position','top','bottom','left','right'];
22+
var el = $( this ),
23+
props = [ 'position', 'top', 'bottom', 'left', 'right' ],
24+
// defaults:
25+
mode = $.effects.setMode( el, o.mode || 'effect' ),
26+
direction = o.direction || 'up',
27+
distance = o.distance || 20,
28+
times = o.times || 5,
29+
speed = (o.duration || 250),
30+
// utility:
31+
ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left',
32+
motion = ( direction == 'up' || direction == 'left' ), // true is positive
33+
i, animation, animation1, animation2;
34+
35+
// Avoid touching opacity to prevent clearType and PNG issues in IE
36+
if ( rshowhide.test( mode ) ) {
37+
props.push( 'opacity' );
38+
}
2139

22-
// Set options
23-
var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode
24-
var direction = o.options.direction || 'up'; // Default direction
25-
var distance = o.options.distance || 20; // Default distance
26-
var times = o.options.times || 5; // Default # of times
27-
var speed = o.duration || 250; // Default speed per bounce
28-
if (/show|hide/.test(mode)) props.push('opacity'); // Avoid touching opacity to prevent clearType and PNG issues in IE
40+
$.effects.save( el, props );
41+
el.show();
42+
$.effects.createWrapper( el ); // Create Wrapper
2943

30-
// Adjust
31-
$.effects.save(el, props); el.show(); // Save & Show
32-
$.effects.createWrapper(el); // Create Wrapper
33-
var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
34-
var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
35-
var distance = o.options.distance || (ref == 'top' ? el.outerHeight({margin:true}) / 3 : el.outerWidth({margin:true}) / 3);
36-
if (mode == 'show') el.css('opacity', 0).css(ref, motion == 'pos' ? -distance : distance); // Shift
37-
if (mode == 'hide') distance = distance / (times * 2);
38-
if (mode != 'hide') times--;
44+
if ( !distance ) {
45+
distance = el[ ref == 'top' ? 'outerHeight' : 'outerWidth' ]({ margin:true }) / 3;
46+
}
47+
if ( mode == 'show' ) el.css( 'opacity', 0 ).css( ref, motion ? -distance : distance ); // Shift
48+
if ( mode == 'hide' ) distance = distance / (times * 2);
49+
if ( mode != 'hide' ) times--;
3950

4051
// Animate
41-
if (mode == 'show') { // Show Bounce
42-
var animation = {opacity: 1};
43-
animation[ref] = (motion == 'pos' ? '+=' : '-=') + distance;
44-
el.animate(animation, speed / 2, o.options.easing);
52+
if ( mode == 'show' ) {
53+
animation = {
54+
opacity: 1
55+
};
56+
animation[ ref ] = ( motion ? '+=' : '-=' ) + distance;
57+
el.animate( animation, speed / 2, o.easing);
4558
distance = distance / 2;
4659
times--;
4760
};
48-
for (var i = 0; i < times; i++) { // Bounces
49-
var animation1 = {}, animation2 = {};
50-
animation1[ref] = (motion == 'pos' ? '-=' : '+=') + distance;
51-
animation2[ref] = (motion == 'pos' ? '+=' : '-=') + distance;
52-
el.animate(animation1, speed / 2, o.options.easing).animate(animation2, speed / 2, o.options.easing);
53-
distance = (mode == 'hide') ? distance * 2 : distance / 2;
54-
};
55-
if (mode == 'hide') { // Last Bounce
56-
var animation = {opacity: 0};
57-
animation[ref] = (motion == 'pos' ? '-=' : '+=') + distance;
58-
el.animate(animation, speed / 2, o.options.easing, function(){
59-
el.hide(); // Hide
60-
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
61-
if(o.callback) o.callback.apply(this, arguments); // Callback
61+
62+
// Bounces
63+
for (i = 0; i < times; i++) {
64+
animation1 = {};
65+
animation2 = {};
66+
animation1[ ref ] = ( motion ? '-=' : '+=' ) + distance;
67+
animation2[ ref ] = ( motion ? '+=' : '-=' ) + distance;
68+
el.animate( animation1, speed / 2, o.easing ).animate( animation2, speed / 2, o.easing );
69+
distance = ( mode == 'hide' ) ? distance * 2 : distance / 2;
70+
}
71+
72+
// Last Bounce
73+
if ( mode == 'hide' ) {
74+
animation = {
75+
opacity: 0
76+
};
77+
animation[ ref ] = ( motion ? '-=' : '+=' ) + distance;
78+
el.animate( animation, speed / 2, o.easing, function(){
79+
el.hide();
80+
$.effects.restore( el, props );
81+
$.effects.removeWrapper( el );
82+
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
6283
});
6384
} else {
64-
var animation1 = {}, animation2 = {};
65-
animation1[ref] = (motion == 'pos' ? '-=' : '+=') + distance;
66-
animation2[ref] = (motion == 'pos' ? '+=' : '-=') + distance;
67-
el.animate(animation1, speed / 2, o.options.easing).animate(animation2, speed / 2, o.options.easing, function(){
68-
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
69-
if(o.callback) o.callback.apply(this, arguments); // Callback
70-
});
71-
};
72-
el.queue('fx', function() { el.dequeue(); });
85+
animation1 = {};
86+
animation2 = {};
87+
animation1[ ref ] = ( motion ? '-=' : '+=' ) + distance;
88+
animation2[ ref ] = ( motion ? '+=' : '-=' ) + distance;
89+
el
90+
.animate( animation1, speed / 2, o.easing )
91+
.animate( animation2, speed / 2, o.easing, function() {
92+
$.effects.restore( el, props );
93+
$.effects.removeWrapper( el );
94+
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
95+
});
96+
}
7397
el.dequeue();
7498
});
7599

‎ui/jquery.effects.clip.js

Lines changed: 44 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -12,40 +12,55 @@
1212
*/
1313
(function( $, undefined ) {
1414

15-
$.effects.clip = function(o) {
15+
$.effects.clip = function( o ) {
1616

17-
return this.queue(function() {
17+
return this.queue( function() {
1818

1919
// Create element
20-
var el = $(this), props = ['position','top','bottom','left','right','height','width'];
21-
22-
// Set options
23-
var mode = $.effects.setMode(el, o.options.mode || 'hide'); // Set Mode
24-
var direction = o.options.direction || 'vertical'; // Default direction
25-
26-
// Adjust
27-
$.effects.save(el, props); el.show(); // Save & Show
28-
var wrapper = $.effects.createWrapper(el).css({overflow:'hidden'}); // Create Wrapper
29-
var animate = el[0].tagName == 'IMG' ? wrapper : el;
30-
var ref = {
31-
size: (direction == 'vertical') ? 'height' : 'width',
32-
position: (direction == 'vertical') ? 'top' : 'left'
33-
};
34-
var distance = (direction == 'vertical') ? animate.height() : animate.width();
35-
if(mode == 'show') { animate.css(ref.size, 0); animate.css(ref.position, distance / 2); } // Shift
36-
37-
// Animation
38-
var animation = {};
39-
animation[ref.size] = mode == 'show' ? distance : 0;
40-
animation[ref.position] = mode == 'show' ? 0 : distance / 2;
20+
var el = $( this ),
21+
props = ['position','top','bottom','left','right','height','width'],
22+
mode = $.effects.setMode( el, o.mode || 'hide' ),
23+
direction = o.direction || 'vertical',
24+
ref = {
25+
size: (direction == 'vertical') ? 'height' : 'width',
26+
position: (direction == 'vertical') ? 'top' : 'left'
27+
},
28+
animation = {},
29+
wrapper, animate, distance;
30+
31+
// Save & Show
32+
$.effects.save( el, props ); el.show();
33+
34+
// Create Wrapper
35+
wrapper = $.effects.createWrapper( el ).css({
36+
overflow: 'hidden'
37+
});
38+
animate = ( el[0].tagName == 'IMG' ) ? wrapper : el;
39+
distance = animate[ ref.size ]();
40+
41+
// Shift
42+
if ( mode == 'show' ) {
43+
animate.css( ref.size, 0 );
44+
animate.css( ref.position, distance / 2 );
45+
}
46+
47+
// Create Animation Object:
48+
animation[ ref.size ] = mode == 'show' ? distance : 0;
49+
animation[ ref.position ] = mode == 'show' ? 0 : distance / 2;
4150

4251
// Animate
43-
animate.animate(animation, { queue: false, duration: o.duration, easing: o.options.easing, complete: function() {
44-
if(mode == 'hide') el.hide(); // Hide
45-
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
46-
if(o.callback) o.callback.apply(el[0], arguments); // Callback
47-
el.dequeue();
48-
}});
52+
animate.animate( animation, {
53+
queue: false,
54+
duration: o.duration,
55+
easing: o.easing,
56+
complete: function() {
57+
mode == 'hide' && el.hide();
58+
$.effects.restore( el, props );
59+
$.effects.removeWrapper( el );
60+
$.isFunction( o.complete ) && o.complete.apply( el[ 0 ], arguments );
61+
el.dequeue();
62+
}
63+
});
4964

5065
});
5166

0 commit comments

Comments
 (0)