jQuery fadeIn fadeOut 背景问题

Posted 2023-02-25

【中文标题】jQuery fadeIn fadeOut 背景问题

【英文标题】：jQuery fadeIn fadeOut background problem

【发布时间】：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>

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

【参考方案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（但是没有褪色，但这很好）。非常感谢大家的帮助和支持！