JsFiddle DEMO

I have the following html:

<ul>
    <li>
        <div></div>
        Testing
    </li>
    <li>
        <ul>
开发者_JAVA百科            <li></li>
            <li>
                <div></div>
                Testing
            </li>
            <li></li>
        </ul>
    </li>
</ul>

And I'm calling this js on it:

$('li').hide(2000);

Now I have a border around the div's What I want is for the borders to fade too, but as you can see the borders are first disappearing completely and then the rest of the elements slowly fade.

Is there anything I can do so that the borders fade like the rest of the element?

Works if you try to hide the 'ul' instead, and has the same effect on the DOM visibility.

setTimeout( function() { $('ul').hide(2000); }, 500);

http://jsfiddle.net/EhzwV/1/

The hide animation sets overflow: hidden on your elements, that is what is causing this. You can see this if you set the overflow yourself with no animation.

http://jsfiddle.net/EhzwV/2/

This will hide all the li elements. If you want any specific element to hide pass the appropriate selector

$('ul').hide(2000);//This will work for you I guess