jQuery fadeIn fadeOut 背景问题答案

【问题标题】：jQuery fadeIn fadeOut background problemjQuery fadeIn fadeOut 背景问题
【发布时间】：2011-09-10 19:05:52
【问题描述】：

当我淡入一个 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>

我的第二个问题是，当我的鼠标悬停在第二个元素上方时，该函数会再次执行（因此第二个元素会淡出并淡入）。而第二个元素只是在容器中

【问题讨论】：

标签： javascript jquery

【解决方案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);
    });

});

【讨论】：

这段代码也有我之前遇到的错误。看看它在行动吧here

【解决方案2】：

补充最后的cmets；我得到了它。我以多种方式尝试了它，并将标题设置为position: absolute，但我不得不将第一个元素设置为position: absolute...now it works（但是没有褪色，但这很好）。非常感谢大家的帮助和支持！

【讨论】：