library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Effects (blind): direction now accepts up/down/left/right as well as vertical(up) and horizontal(left) - Fixes #4480 - Invert the blind effect.

Browse Source
This commit is contained in:
gnarf 2011-05-03 09:16:30 -04:00 committed by Scott González
parent cbce3585bc
commit 1f3f7bf787
3 changed files with 62 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
tests/visual/effects.all.html
View File

@ -26,14 +26,26 @@
<ul class="effects">
<li>
<div class="effect" id="blindHorizontally">
<p>Blind horizontally</p>
<div class="effect" id="blindUp">
<p>Blind up</p>
</div>
</li>
<li>
<div class="effect" id="blindVertically">
<p>Blind vertically</p>
<div class="effect" id="blindDown">
<p>Blind down</p>
</div>
</li>
<li>
<div class="effect" id="blindLeft">
<p>Blind left</p>
</div>
</li>
<li>
<div class="effect" id="blindRight">
<p>Blind right</p>
</div>
</li>

6
tests/visual/effects.all.js
View File

@ -33,8 +33,10 @@ $(function() {
})
})
effect("#blindHorizontally", "blind", { direction: "horizontal" });
effect("#blindVertically", "blind", { direction: "vertical" });
effect("#blindLeft", "blind", { direction: "left" });
effect("#blindUp", "blind", { direction: "up" });
effect("#blindRight", "blind", { direction: "right" });
effect("#blindDown", "blind", { direction: "down" });
effect("#bounce3times", "bounce", { times: 3 });

55
ui/jquery.effects.blind.js vendored
View File

@ -12,37 +12,66 @@
*/
(function( $, undefined ) {
var rvertical = /up|down|vertical/;
var rpositivemotion = /up|left|vertical|horizontal/;
$.effects.effect.blind = function( o ) {
return this.queue( function() {
// Create element
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',
props = [ "position", "top", "bottom", "left", "right" ],
mode = $.effects.setMode( el, o.mode || "hide" ),
direction = o.direction || "up",
vertical = rvertical.test( direction ),
ref = vertical ? "height" : "width",
ref2 = vertical ? "top" : "left",
motion = rpositivemotion.test( direction ),
animation = {},
wrapper, distance;
$.effects.save( el, props );
el.show();
wrapper = $.effects.createWrapper( el ).css({
overflow: 'hidden'
overflow: "hidden"
});
animation[ ref ] = ( mode == 'show' ? wrapper[ ref ]() : 0 );
distance = wrapper[ ref ]();
animation[ ref ] = ( mode === "show" ? distance : 0 );
if ( !motion ) {
el
.css( vertical ? "bottom" : "right", 0 )
.css( vertical ? "top" : "left", "" )
.css({ position: "absolute" });
animation[ ref2 ] = ( mode === "show" ) ? 0 : distance;
}
// start at 0 if we are showing
( mode == 'show' && wrapper.css( ref, 0 ) );
if ( mode == "show" ) {
wrapper.css( ref, 0 );
if ( ! motion ) {
wrapper.css( ref2, distance );
}
}
// Animate
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();
wrapper.animate( animation, {
duration: o.duration,
easing: o.easing,
queue: false,
complete: function() {
if ( mode == "hide" ) {
el.hide();
}
$.effects.restore( el, props );
$.effects.removeWrapper( el );
if ( $.isFunction( o.complete ) ) {
o.complete.apply( el[ 0 ], arguments );
}
el.dequeue();
}
});
});