]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 19dcac2)
effects.core: Convert elements height/width to px and restore after animation in...
authortomykaira <tomykaira@gmail.com>
Fri, 10 Jun 2011 01:36:48 +0000 (20:36 -0500)
committergnarf <gnarf@gnarf.net>
Fri, 10 Jun 2011 01:38:09 +0000 (20:38 -0500)
tests/unit/effects/effects.html patch | blob | history
tests/unit/effects/effects_core.js patch | blob | history
ui/jquery.effects.blind.js patch | blob | history
ui/jquery.effects.bounce.js patch | blob | history
ui/jquery.effects.core.js patch | blob | history
ui/jquery.effects.drop.js patch | blob | history
ui/jquery.effects.fold.js patch | blob | history
ui/jquery.effects.scale.js patch | blob | history
ui/jquery.effects.shake.js patch | blob | history
ui/jquery.effects.slide.js patch | blob | history

diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html
index 84fecd9ccc04acad43af90f2515eeaf4c27c2aa9..6956ebcda21749465d6c8454c59bedb8893576a9 100644 (file)
--- a/tests/unit/effects/effects.html
+++ b/tests/unit/effects/effects.html
@@ -54,6 +54,14 @@
                .testChildren h2 {
                        font-size: 20px;
                }
+               
+               .relWidth {
+                       width: 50%;
+               }
+
+               .relHeight {
+                       height: 50%;
+               }
        </style>
 </head>
 <body>
@@ -70,6 +78,9 @@
        <div class="animateClass test">
                <h2>Child Element Test</h2>
        </div>
+       <div class="relWidth relHeight testAddBorder">
+               <h2>Slide with relative width</d2>
+       </div>
 </div>
 
 </body>
diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js
index ed9fbf9ba0e1be2797e5f5ecbff78344448e3e48..4c685ebb66755bb9735fa4c2fe095ede1211df43 100644 (file)
--- a/tests/unit/effects/effects_core.js
+++ b/tests/unit/effects/effects_core.js
@@ -54,6 +54,21 @@ $.each( $.effects.effect, function( effect ) {
                        start();
                }));
        });
+
+       asyncTest( "relative width & height - properties are preserved", function() {
+               var test = $("div.relWidth.relHeight"),
+                       width = test.width(), height = test.height(),
+                       cssWidth = test[0].style.width, cssHeight = test[0].style.height;
+
+               expect( 4 );
+               test.toggle( effect, minDuration, function() {
+                       equal( test[0].style.width, cssWidth, "Inline CSS Width has been reset after animation ended" );
+                       equal( test[0].style.height, cssHeight, "Inline CSS Height has been rest after animation ended" );
+                       start();
+               });
+               equal( test.width(), width, "Width is the same px after animation started" );
+               equal( test.height(), height, "Height is the same px after animation started" );
+       });
 });
 
 module("animateClass");
diff --git a/ui/jquery.effects.blind.js b/ui/jquery.effects.blind.js
index 8ef544faa6d8392d16a141757a4454b446bed083..b6485b6417105f0db7bfe9f1bc5b20fd7ec19fc9 100644 (file)
--- a/ui/jquery.effects.blind.js
+++ b/ui/jquery.effects.blind.js
@@ -21,7 +21,7 @@ $.effects.effect.blind = function( o ) {
 
                // Create element
                var el = $( this ),
-                       props = [ "position", "top", "bottom", "left", "right" ],
+                       props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
                        mode = $.effects.setMode( el, o.mode || "hide" ),
                        direction = o.direction || "up",
                        vertical = rvertical.test( direction ),
diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js
index 9e1117ce982c95a889b8cbd5fc3ee599813ddef3..78fedb0ceb55b8b09513e9c412f18c557360777f 100644 (file)
--- a/ui/jquery.effects.bounce.js
+++ b/ui/jquery.effects.bounce.js
@@ -16,7 +16,7 @@ $.effects.effect.bounce = function(o) {
 
        return this.queue( function( next ) {
                var el = $( this ), 
-                       props = [ "position", "top", "bottom", "left", "right" ],
+                       props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
 
                        // defaults:
                        mode = $.effects.setMode( el, o.mode || "effect" ),
diff --git a/ui/jquery.effects.core.js b/ui/jquery.effects.core.js
index 7650aa8f4e664e33139a31f244b6c290e3f7331e..00a803360b820545a110945c70bb6d0568e1e559 100644 (file)
--- a/ui/jquery.effects.core.js
+++ b/ui/jquery.effects.core.js
@@ -410,7 +410,12 @@ $.extend( $.effects, {
                                        border: "none",
                                        margin: 0,
                                        padding: 0
-                               });
+                               }),
+                       // Store the size in case width/height are defined in % - Fixes #5245
+                       size = {
+                               width: element.width(),
+                               height: element.height()
+                       };
 
                element.wrap( wrapper );
                wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually loose the reference to the wrapped element
@@ -438,6 +443,7 @@ $.extend( $.effects, {
                                bottom: "auto"
                        });
                }
+               element.css(size);
 
                return wrapper.css( props ).show();
        },
diff --git a/ui/jquery.effects.drop.js b/ui/jquery.effects.drop.js
index 24fb89db0b9b1e8fede62d36db1d05ab63b2d61e..4265b737b4e50bc381b9de3e6e5abf3582d13a9d 100644 (file)
--- a/ui/jquery.effects.drop.js
+++ b/ui/jquery.effects.drop.js
@@ -17,7 +17,7 @@ $.effects.effect.drop = function( o ) {
        return this.queue( function() {
 
                var el = $( this ), 
-                       props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity' ],
+                       props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity', "height", "width" ],
                        mode = $.effects.setMode( el, o.mode || 'hide' ),
                        direction = o.direction || 'left',
                        ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left',
diff --git a/ui/jquery.effects.fold.js b/ui/jquery.effects.fold.js
index 29da090cb8908f8d6da1e82b504de4add09952c6..6100c33a163072f335f12f8952ad65789d5d0a0a 100644 (file)
--- a/ui/jquery.effects.fold.js
+++ b/ui/jquery.effects.fold.js
@@ -18,7 +18,7 @@ $.effects.effect.fold = function( o ) {
 
                // Create element
                var el = $( this ),
-                       props = ['position','top','bottom','left','right'],
+                       props = ['position','top','bottom','left','right','height','width'],
                        mode = $.effects.setMode(el, o.mode || 'hide'),
                        size = o.size || 15,
                        percent = /([0-9]+)%/.exec(size),
diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js
index 00f0151af03371daba41caf5180564e820770ad0..fe0c03c53fcfa9123db2ecf7380aaa05b72712ec 100644 (file)
--- a/ui/jquery.effects.scale.js
+++ b/ui/jquery.effects.scale.js
@@ -116,7 +116,7 @@ $.effects.effect.size = function( o ) {
 
                        // Set options
                        mode = $.effects.setMode( el, o.mode || 'effect' ),
-                       restore = o.restore || false,
+                       restore = o.restore || mode !== "effect",
                        scale = o.scale || 'both',
                        origin = o.origin,
                        original, baseline, factor;
diff --git a/ui/jquery.effects.shake.js b/ui/jquery.effects.shake.js
index 550329ca40871992479f68ed13bea57c1adc447c..52ab331e8b48f7553da5e2c64d16b148045a46f2 100644 (file)
--- a/ui/jquery.effects.shake.js
+++ b/ui/jquery.effects.shake.js
@@ -17,7 +17,7 @@ $.effects.effect.shake = function( o ) {
        return this.queue( function() {
 
                var el = $( this ),
-                       props = [ "position", "top", "bottom", "left", "right" ],
+                       props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
                        mode = $.effects.setMode( el, o.mode || "effect" ),
                        direction = o.direction || "left",
                        distance = o.distance || 20,
diff --git a/ui/jquery.effects.slide.js b/ui/jquery.effects.slide.js
index 6b029675414ef48788e3776397c6669ae797e3f3..ccb13fa1bebd137088b9aebb995ff1eb087af4c1 100644 (file)
--- a/ui/jquery.effects.slide.js
+++ b/ui/jquery.effects.slide.js
@@ -18,24 +18,26 @@ $.effects.effect.slide = function( o ) {
 
                // Create element
                var el = $( this ),
-                       props = ['position','top','bottom','left','right'],
+                       props = [ "position", "top", "bottom", "left", "right", "width", "height" ],
                        mode = $.effects.setMode( el, o.mode || 'show' ),
                        direction = o.direction || 'left',
                        ref = (direction == 'up' || direction == 'down') ? 'top' : 'left',
                        motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg',
                        distance,
-                       animation = {}; 
+                       animation = {},
+                       size;
 
                // Adjust
-               $.effects.save( el, props ); 
+               $.effects.save( el, props );
                el.show();
+               distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({ 
+                       margin: true
+               });
+               
                $.effects.createWrapper( el ).css({
                        overflow: 'hidden'
-               }); 
-               
-               distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({ 
-                       margin: true 
                });
+               
                if (mode == 'show') {
                        el.css( ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance );
                }
The official jQuery user interface library: https://github.com/jquery/jquery-ui