jQuery fadeIn fadeOut background problem
<p>When I fadeIn a div, and this animation finished, the background suddenly disappears (this time only in Firefox).
I have a container, with two nested elements in it. The second element has a negative margin, so it appears on top of the first.</p>

<p>My script:</p>

<pre><code>jQuery(document).ready(function($) {
    $(".second_element").hide();
    $(".container").each(function () {
        $(this).mouseover(function () {
            $(this).children(".second_element").stop(true, true);
            $(this).children(".second_element").fadeIn(250, 'linear');
        }); 
        $(this).mouseout(function () {
            $(this).children(".second_element").stop(true, true);
            $(this).children(".second_element").fadeOut(100, 'linear');
        });
    });
});
</code></pre>

<p>CSS:</p>

<pre><code>.container{
width: 221px;
height: 202px;
display: block;
float: left;
position: relative;
}

.first_element {
height: 200px;
width: 219px;
}

.second_element {
display:none;
background: #fff !important;
margin-top: -51px;
width: 219px;
height: 50px;
}
</code></pre>

<p>And for clarity, this a HTML example</p>

<pre><code>&lt;td class="container"&gt;
    &lt;div id="first_element"&gt;...&lt;/div&gt;
    &lt;div id="second_element"&gt;...&lt;/div&gt;
&lt;/td&gt;
</code></pre>

<p>My second problem is, that when my mouse is hovering above the second element, the function is executed again (so the second element fades out and in). While the second element is just IN the container</p>
