Skip to content

Commit c1f71f1

Browse files
committed
Effects.scale: Update the position of the element post animation to avoid jumping - Fixed #4316 - Element jumps to wrong position after scale effect with origin: ['middle','center'] parameter
1 parent b0182d7 commit c1f71f1

File tree

1 file changed

+46
-3
lines changed

1 file changed

+46
-3
lines changed

ui/jquery.effects.scale.js

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,11 @@ $.effects.effect.size = function( o ) {
118118
mode = $.effects.setMode( el, o.mode || 'effect' ),
119119
restore = o.restore || mode !== "effect",
120120
scale = o.scale || 'both',
121-
origin = o.origin,
122-
original, baseline, factor;
121+
origin = o.origin || [ "middle", "center" ],
122+
original, baseline, factor,
123+
position = el.css( "position" ),
124+
originalVerticalPositioning = el.css( "bottom" ) !== "auto" ? "bottom" : "top";
125+
originalHorizontalPositioning = el.css( "right" ) !== "auto" ? "right" : "left";
123126

124127
if ( mode === "show" ) {
125128
el.show();
@@ -249,7 +252,47 @@ $.effects.effect.size = function( o ) {
249252
if( mode == 'hide' ) {
250253
el.hide();
251254
}
252-
$.effects.restore( el, restore ? props : props1 );
255+
$.effects.restore( el, restore ? props : props1 );
256+
257+
// we need to recalculate our positioning based on the new scaling
258+
if ( position === "static" ) {
259+
el.css({
260+
position: "relative",
261+
top: el.to.top,
262+
left: el.to.left
263+
});
264+
} else {
265+
$.each([ originalVerticalPositioning, originalHorizontalPositioning ], function( idx, pos ) {
266+
el.css( pos, function( _, str ) {
267+
var val = parseInt( str, 10 ),
268+
toRef = idx ? el.to.left : el.to.top,
269+
delta = idx ? el.to.outerWidth - el.from.outerWidth: el.to.outerHeight - el.from.outerHeight,
270+
same = origin[ idx ] === pos,
271+
mid = origin[ idx ] === "middle" || origin[ idx ] === "center",
272+
direction = pos == "left" || pos == "top";
273+
274+
// if original was "auto", recalculate the new value from wrapper
275+
if ( str === "auto" ) {
276+
return toRef + "px";
277+
}
278+
279+
// if not setting left or top
280+
if ( !direction ) {
281+
282+
// if the position is relative, bottom/right are reversed meaning
283+
if ( position === "relative" ) {
284+
toRef *= -1;
285+
286+
// otherwise, if its NOT a midpoint origin, compensate for the outerWidth difference
287+
} else if ( !mid ) {
288+
toRef -= delta * ( same ? -1 : 1 );
289+
}
290+
}
291+
return val + toRef + "px";
292+
});
293+
});
294+
}
295+
253296
$.effects.removeWrapper( el );
254297
$.isFunction( o.complete ) && o.complete.apply( this, arguments ); // Callback
255298
el.dequeue();

0 commit comments

Comments
 (0)