jQuery: Slide animation on DIV changes its size
I have a simple HTML page wherein I'm attempting to apply the slide animation on a DIV. The DIV has nothing fancy and is described below:
<body>
<div id="content" style="position:absolute; top: 5%; left: 5%; width:80%;
height:70%; color:#333; background:#eaeaea;
border:1px solid #333;">
<input type="button" name="buttonId" value="click!"/>
</div>
</body>
Clicking on the button invo开发者_如何学Pythonkes a jQuery animation function to slide this DIV to the right:
$('#content').hide('slide', { direction: 'right' }, 1000);
$('#content').show('slide', { direction: 'right' }, 500);
Now the issue that I'm facing is, when the DIV begins its sliding animation, then there's a clear 'squeezing' of its height. Once the animation completes, the DIV regains its actual height. But through the animation, the DIV's height remains shortened.
I have also observed that when I set the height attribute of the DIV using a fixed unit like px or em, then there's no such squeezing. The distortion only occurs when the height is set in %.
Can someone tell me what causes this?
Thanks.
You already have the solution to your problem, Get the outer width of your element and set it to pixels before calling the sliding animation. Add a callback to the function and set it back to a percentage once the effect has finished animating.
I have no idea why its squeezing.
I've got the same problem and I've solved it by changing width and height by min-width and min-height solved my problem. The difference is that I have the style in css file.
加载中,请稍侯......
精彩评论