Skip to content
Permalink
Browse files

Merge branch 'effects-api' of https://github.com/gnarf37/jquery-ui in…

…to gnarf37-effects-api
  • Loading branch information...
scottgonzalez committed Mar 9, 2011
2 parents fa7f5d2 + 74cff5d commit 3875cf63e4bef49b0da888bc9c8e60b9512cbf60
@@ -11,6 +11,7 @@
<script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.fade.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script>
@@ -90,6 +91,12 @@
</div>
</li>

<li>
<div class="effect" id="fade">
<p>Fade</p>
</div>
</li>

<li>
<div class="effect" id="fold">
<p>Fold</p>
@@ -174,6 +181,12 @@
</div>
</li>

<li>
<div class="effect" id="hide">
<p>hide/show (jQuery)</p>
</div>
</li>

</ul>

</body>
@@ -1,5 +1,6 @@

$(function() {
var duration = 1000, wait = 500;

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

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

$(this).addClass("current").hide(n, o, 1000, function() {
$(this).addClass("current").hide(n, o, duration, function() {
var self = this;
window.setTimeout(function() {
$(self).show(n, o, 1000, function() { $(this).removeClass("current"); });
},500);
$(self).show(n, o, duration, function() { $(this).removeClass("current"); });
}, wait);
});
});

};

$("#hide").click(function() {
var el = $(this);
el.addClass("current").hide(duration, function() {
setTimeout(function() {
el.show(duration, function() { el.removeClass("current") });
}, wait);
})
})

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

effect("#fade", "fade", {});

effect("#fold", "fold", { size: 50 });

effect("#highlight", "highlight", {});
@@ -61,20 +73,20 @@ $(function() {
$(this).addClass(function() {
window.console && console.log(arguments);
return "current";
}, 1000, function() {
}, duration, function() {
$(this).removeClass("current");
});
});
$("#removeClass").click(function() {
$(this).addClass("current").removeClass(function() {
window.console && console.log(arguments);
return "current"
}, 1000);
}, duration);
});
$("#toggleClass").click(function() {
$(this).toggleClass(function() {
window.console && console.log(arguments);
return "current"
}, 1000);
}, duration);
});
});
@@ -12,33 +12,36 @@
*/
(function( $, undefined ) {

$.effects.blind = function(o) {
$.effects.blind = function( o ) {

return this.queue(function() {
return this.queue( function() {

// Create element
var el = $(this), props = ['position','top','bottom','left','right'];

// Set options
var mode = $.effects.setMode(el, o.options.mode || 'hide'); // Set Mode
var direction = o.options.direction || 'vertical'; // Default direction
var el = $( this ),
props = [ 'position', 'top', 'bottom', 'left', 'right' ],
mode = $.effects.setMode( el, o.mode || 'hide' ),
direction = o.direction || 'vertical',
ref = ( direction == 'vertical' ) ? 'height' : 'width',
animation = {},
wrapper, distance;

$.effects.save( el, props );
el.show();
wrapper = $.effects.createWrapper( el ).css({
overflow: 'hidden'
});

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

// Animation
var animation = {};
animation[ref] = mode == 'show' ? distance : 0;
// start at 0 if we are showing
( mode == 'show' && wrapper.css( ref, 0 ) );

// Animate
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(el[0], arguments); // Callback
wrapper.animate( animation, o.duration, o.easing, function() {
( mode == 'hide' && el.hide() );
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( el[ 0 ], arguments );
el.dequeue();
});

@@ -12,64 +12,88 @@
*/
(function( $, undefined ) {

var rshowhide = /show|hide/;

$.effects.bounce = function(o) {

return this.queue(function() {

// Create element
var el = $(this), props = ['position','top','bottom','left','right'];
var el = $( this ),
props = [ 'position', 'top', 'bottom', 'left', 'right' ],
// defaults:
mode = $.effects.setMode( el, o.mode || 'effect' ),
direction = o.direction || 'up',
distance = o.distance || 20,
times = o.times || 5,
speed = (o.duration || 250),
// utility:
ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left',
motion = ( direction == 'up' || direction == 'left' ), // true is positive
i, animation, animation1, animation2;

// Avoid touching opacity to prevent clearType and PNG issues in IE
if ( rshowhide.test( mode ) ) {
props.push( 'opacity' );
}

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

// Adjust
$.effects.save(el, props); el.show(); // Save & Show
$.effects.createWrapper(el); // Create Wrapper
var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
var distance = o.options.distance || (ref == 'top' ? el.outerHeight({margin:true}) / 3 : el.outerWidth({margin:true}) / 3);
if (mode == 'show') el.css('opacity', 0).css(ref, motion == 'pos' ? -distance : distance); // Shift
if (mode == 'hide') distance = distance / (times * 2);
if (mode != 'hide') times--;
if ( !distance ) {
distance = el[ ref == 'top' ? 'outerHeight' : 'outerWidth' ]({ margin:true }) / 3;
}
if ( mode == 'show' ) el.css( 'opacity', 0 ).css( ref, motion ? -distance : distance ); // Shift
if ( mode == 'hide' ) distance = distance / (times * 2);
if ( mode != 'hide' ) times--;

// Animate
if (mode == 'show') { // Show Bounce
var animation = {opacity: 1};
animation[ref] = (motion == 'pos' ? '+=' : '-=') + distance;
el.animate(animation, speed / 2, o.options.easing);
if ( mode == 'show' ) {
animation = {
opacity: 1
};
animation[ ref ] = ( motion ? '+=' : '-=' ) + distance;
el.animate( animation, speed / 2, o.easing);
distance = distance / 2;
times--;
};
for (var i = 0; i < times; i++) { // Bounces
var animation1 = {}, animation2 = {};
animation1[ref] = (motion == 'pos' ? '-=' : '+=') + distance;
animation2[ref] = (motion == 'pos' ? '+=' : '-=') + distance;
el.animate(animation1, speed / 2, o.options.easing).animate(animation2, speed / 2, o.options.easing);
distance = (mode == 'hide') ? distance * 2 : distance / 2;
};
if (mode == 'hide') { // Last Bounce
var animation = {opacity: 0};
animation[ref] = (motion == 'pos' ? '-=' : '+=') + distance;
el.animate(animation, speed / 2, o.options.easing, function(){
el.hide(); // Hide
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
if(o.callback) o.callback.apply(this, arguments); // Callback

// Bounces
for (i = 0; i < times; i++) {
animation1 = {};
animation2 = {};
animation1[ ref ] = ( motion ? '-=' : '+=' ) + distance;
animation2[ ref ] = ( motion ? '+=' : '-=' ) + distance;
el.animate( animation1, speed / 2, o.easing ).animate( animation2, speed / 2, o.easing );
distance = ( mode == 'hide' ) ? distance * 2 : distance / 2;
}

// Last Bounce
if ( mode == 'hide' ) {
animation = {
opacity: 0
};
animation[ ref ] = ( motion ? '-=' : '+=' ) + distance;
el.animate( animation, speed / 2, o.easing, function(){
el.hide();
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
});
} else {
var animation1 = {}, animation2 = {};
animation1[ref] = (motion == 'pos' ? '-=' : '+=') + distance;
animation2[ref] = (motion == 'pos' ? '+=' : '-=') + distance;
el.animate(animation1, speed / 2, o.options.easing).animate(animation2, speed / 2, o.options.easing, function(){
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
if(o.callback) o.callback.apply(this, arguments); // Callback
});
};
el.queue('fx', function() { el.dequeue(); });
animation1 = {};
animation2 = {};
animation1[ ref ] = ( motion ? '-=' : '+=' ) + distance;
animation2[ ref ] = ( motion ? '+=' : '-=' ) + distance;
el
.animate( animation1, speed / 2, o.easing )
.animate( animation2, speed / 2, o.easing, function() {
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
});
}
el.dequeue();
});

@@ -12,40 +12,55 @@
*/
(function( $, undefined ) {

$.effects.clip = function(o) {
$.effects.clip = function( o ) {

return this.queue(function() {
return this.queue( function() {

// Create element
var el = $(this), props = ['position','top','bottom','left','right','height','width'];

// Set options
var mode = $.effects.setMode(el, o.options.mode || 'hide'); // Set Mode
var direction = o.options.direction || 'vertical'; // Default direction

// Adjust
$.effects.save(el, props); el.show(); // Save & Show
var wrapper = $.effects.createWrapper(el).css({overflow:'hidden'}); // Create Wrapper
var animate = el[0].tagName == 'IMG' ? wrapper : el;
var ref = {
size: (direction == 'vertical') ? 'height' : 'width',
position: (direction == 'vertical') ? 'top' : 'left'
};
var distance = (direction == 'vertical') ? animate.height() : animate.width();
if(mode == 'show') { animate.css(ref.size, 0); animate.css(ref.position, distance / 2); } // Shift

// Animation
var animation = {};
animation[ref.size] = mode == 'show' ? distance : 0;
animation[ref.position] = mode == 'show' ? 0 : distance / 2;
var el = $( this ),
props = ['position','top','bottom','left','right','height','width'],
mode = $.effects.setMode( el, o.mode || 'hide' ),
direction = o.direction || 'vertical',
ref = {
size: (direction == 'vertical') ? 'height' : 'width',
position: (direction == 'vertical') ? 'top' : 'left'
},
animation = {},
wrapper, animate, distance;

// Save & Show
$.effects.save( el, props ); el.show();

// Create Wrapper
wrapper = $.effects.createWrapper( el ).css({
overflow: 'hidden'
});
animate = ( el[0].tagName == 'IMG' ) ? wrapper : el;
distance = animate[ ref.size ]();

// Shift
if ( mode == 'show' ) {
animate.css( ref.size, 0 );
animate.css( ref.position, distance / 2 );
}

// Create Animation Object:
animation[ ref.size ] = mode == 'show' ? distance : 0;
animation[ ref.position ] = mode == 'show' ? 0 : distance / 2;

// Animate
animate.animate(animation, { queue: false, duration: o.duration, easing: o.options.easing, complete: function() {
if(mode == 'hide') el.hide(); // Hide
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
if(o.callback) o.callback.apply(el[0], arguments); // Callback
el.dequeue();
}});
animate.animate( animation, {
queue: false,
duration: o.duration,
easing: o.easing,
complete: function() {
mode == 'hide' && el.hide();
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( el[ 0 ], arguments );
el.dequeue();
}
});

});

0 comments on commit 3875cf6

Please sign in to comment.
You can’t perform that action at this time.