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.core: Convert elements height/width to px and restore after animation in all effects. Fixed #5245 - Relative width elements break when wrapped for effects

Browse Source
This commit is contained in:
tomykaira 2011-06-09 20:36:48 -05:00 committed by gnarf
parent 19dcac2129
commit 2c8151848d
10 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
tests/unit/effects/effects.html
View File

@ -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>

15
tests/unit/effects/effects_core.js
View File

@ -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");

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

@ -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 ),

2
ui/jquery.effects.bounce.js vendored
View File

@ -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" ),

8
ui/jquery.effects.core.js vendored
View File

@ -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();
},

2
ui/jquery.effects.drop.js vendored
View File

@ -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',

2
ui/jquery.effects.fold.js vendored
View File

@ -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),

2
ui/jquery.effects.scale.js vendored
View File

@ -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;

2
ui/jquery.effects.shake.js vendored
View File

@ -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,

12
ui/jquery.effects.slide.js vendored
View File

@ -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 );
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 );
}