Relative width elements break when wrapped for effects.

[ajpiano]

As per this forum thread, ​http://forum.jquery.com/topic/strange-slide-effectf-when-using-relative-width, the "slide" effect is jumpy on contained element.

​http://jsfiddle.net/n4vET/3/

Note that the jumpiness is manifested in Firefox, but not in Webkit.

The problem exists in createWrapper, the element is wrapped with a div, who's width is set to that of the element, at that point, the relative width recalculated, and thus the element "shrinks"

It also effects bounce & clip for sure, but potentially others as well.

[Corey Frang]

Working Fiddle Test: ​http://jsfiddle.net/gnarf/FXtVP/1/

[tomykaira]

​https://github.com/jquery/jquery-ui/pull/314

effects.slide: fix: reset width and height on the end of animation, get distance before wrapping. #5245-Slide Effect Broken With Relative Width

Tested with Firefox 4.

[tomykaira]

​https://github.com/jquery/jquery-ui/pull/326

Effects.core: Storing size and setting in createWrapper for applied to all effects. Fixed #5245 - Relative width elements break when wrapped for effects.

This is discussed in ​https://github.com/jquery/jquery-ui/pull/314 . Since this size problem is common among effects, I modified createWrapper and made it always store / set element size.

[tomykaira]

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

Changeset: 2c8151848d191ad9ba53c0ee86b14aefe4288f67

[Corey Frang]

#7611 is a duplicate of this ticket.

[Corey Frang]

#7725 is a duplicate of this ticket.

[GitHub <[email protected]…>]

In 91037d6:

Tests: Accept a small difference of animated width/height

jQuery 3.2 & newer have a different animation logic and the animated elements
width/height differ from the starting ones even at the beginning of the
animation. The point of the assertions checking that they're identical was
to ensure bug #5245 is fixed; that issue manifested by a big jump to half the
element size. To test for that, it's enough to check that the first obtained
values are close to the original ones.

This makes effects tests pass in all supported jQuery versions.

Closes gh-1928
Ref #5245