Skip to content
Permalink
Browse files

effects.core: Convert elements height/width to px and restore after a…

…nimation in all effects. Fixed #5245 - Relative width elements break when wrapped for effects
  • Loading branch information...
tomykaira authored and gnarf committed Jun 10, 2011
1 parent 19dcac2 commit 2c8151848d191ad9ba53c0ee86b14aefe4288f67
@@ -54,6 +54,14 @@
.testChildren h2 {
font-size: 20px;
}
.relWidth {
width: 50%;
}
.relHeight {
height: 50%;
}
</style>
</head>
<body>
@@ -70,6 +78,9 @@ <h2 id="qunit-userAgent"></h2>
<div class="animateClass test">
<h2>Child Element Test</h2>
</div>
<div class="relWidth relHeight testAddBorder">
<h2>Slide with relative width</d2>
</div>
</div>

</body>
@@ -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");
@@ -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 ),
@@ -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" ),
@@ -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();
},
@@ -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',
@@ -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),
@@ -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;
@@ -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,
@@ -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 );
}

0 comments on commit 2c81518

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