Bug with built-in effects and CSS float

Bug with built-in effects and CSS float


I'm not certain if you can truly consider this a bug but I thought I'd
post it anyway. I learned that some of the built-in effects don't
work properly when non-floated parent contains floated children.
Specifically, slideUp, fadeOut, and toggle do nothing in this case.
I've also noticed that using fadeIn BEFORE any of these effects fixes
the problem.
Below is a test scenario I created to test the bug.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Test</title>
    <script type="text/javascript" src="http://jquery.com/src/jquery-
latest.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="Show" onclick="$('#test').show(); return
false;" />
        <input type="button" value="Hide" onclick="$('#test').hide(); return
false;" />
        <input type="button" value="Slide Up" onclick="$('#test').slideUp();
return false;" />
        <input type="button" value="Slide Down" onclick="$('#test').slideDown
(); return false;" />
        <input type="button" value="Fade Out" onclick="$('#test').fadeOut();
return false;" />
        <input type="button" value="Fade In" onclick="$('#test').fadeIn();
return false;" />
        <input type="button" value="Toggle" onclick="$('#test').toggle();
return false;" />
    </div>
    <div id="test">
        <div style="float: left;">Content here...</div>
    </div>
    </form>
</body>
</html>