Question

I have a load of lis which I slide up using jQuery and the animate() function. Using slideUp() and slideDown() gives the same effect which I will now describe: the lis slide up just fine, but when their heights are zero the borders (top and bottom, 1px) remain, then snap out of existence all at once. I’m wondering… is there a way in jQuery to get the borders to not ‘snap’ away, but smoothly slide up/down like the rest of the li or div or whatever.

The code I have at the moment is this:

.animate({
    height: 'toggle',
    margin: 'toggle',
    padding: 'toggle',
    opacity: 'toggle'
});

I tried using the border CSS property with 'toggle'. It works fine for sliding up, but when sliding back down, the borders snap back into existence at the end of the easing animation.

Answer 1

I know what you are talking about. I’ve done this before and had the same issue. The work around is to animate a containing div inside of the border div. Its the same effect.

For example…

<!--- Flakey --->
<div class="border slideMe">
   Content here...
</div>

<!--- Correct --->
<div class="border">
   <div class="slideMe">
      Content here...
   </div>
</div>

Hope this saves you some headache.