The answer you seek is that the animation increases the size of the <img>
which pushes the padding out and the border as well. With your code “as is” you need to set a height and width on your div.stable
greater than the maximum size after animation. Here is a pic of your pen with an exaggerated size for your exploration.
Notice also that in your javascript window I changed your selector from
li img
to img
. div img
also works. I mention this because you have a <div>
as a child of <ul>
and an <li>
as a child of a <div>
. Both of which should not be.jquery ui is using a ‘div’ as the basis for your widget, knowing that, you should be able to correct your HTML with the JS still working. PS some of your script is returning undefined.