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 ... now it works（但不是褪色，而是很好）。非常感谢你的帮助和支持！

jQuery fadeIn fadeOut后台问题

2 个答案: