diff options
| -rw-r--r-- | tests/visual/effects.all.html | 20 | ||||
| -rw-r--r-- | tests/visual/effects.all.js | 6 | ||||
| -rw-r--r-- | ui/jquery.effects.blind.js | 55 |
3 files changed, 62 insertions, 19 deletions
diff --git a/tests/visual/effects.all.html b/tests/visual/effects.all.html index 1bbc7a110..1fc35f700 100644 --- a/tests/visual/effects.all.html +++ b/tests/visual/effects.all.html @@ -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> diff --git a/tests/visual/effects.all.js b/tests/visual/effects.all.js index 5e47a4f48..3ac8968b3 100644 --- a/tests/visual/effects.all.js +++ b/tests/visual/effects.all.js @@ -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 }); diff --git a/ui/jquery.effects.blind.js b/ui/jquery.effects.blind.js index 6b7250789..7a59d8a75 100644 --- a/ui/jquery.effects.blind.js +++ b/ui/jquery.effects.blind.js @@ -11,6 +11,9 @@ * jquery.effects.core.js */ (function( $, undefined ) { + +var rvertical = /up|down|vertical/; +var rpositivemotion = /up|left|vertical|horizontal/; $.effects.effect.blind = function( o ) { @@ -18,31 +21,57 @@ $.effects.effect.blind = function( o ) { // 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(); + } }); }); |