jQuery fadeIn fadeOut背景問題

Question

當我在div中淡入淡出並且此動畫完成時，背景突然消失（這次僅在Firefox中）。 我有一個容器，其中有兩個嵌套元素。 第二個元素的邊距為負，因此它出現在第一個元素的頂部。

我的劇本：

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');
        });
    });
});

CSS：

.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;
}

為了清楚起見，這是一個HTML示例

<td class="container">
    <div id="first_element">...</div>
    <div id="second_element">...</div>
</td>

我的第二個問題是，當鼠標懸停在第二個元素上方時，該函數將再次執行（因此第二個元素逐漸淡入和淡出）。 而第二個元素只是在容器中

Answer 1

這比較短，而且對於第一次運行，最好通過fadeOut()而不是hide()隱藏目標

$(".caption").fadeOut(1);

$(".container").each(function() {

    $(this).mouseover(function() {
        $(".caption", this).stop().fadeIn(250);
    });

    $(this).mouseout(function() {
        $(".caption", this).stop().fadeOut(250);
    });

});

Answer 2

補充最后的評論； 我知道了。 我嘗試了幾種方法，還使用了position: absolute標題position: absolute ，但是我不得不將第一個元素設置為position: absolute ... 現在可以工作了 （但是不褪色，但這很好）。 非常感謝您的幫助和支持！