jQuery fadeIn淡出背景问题

jQuery fadeIn fadeOut background problem

本文关键字：问题 背景 淡出 fadeIn jQuery      更新时间：2023-09-26

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

我的第二个问题是，当我的鼠标悬停在第二个元素上方时，函数再次执行(因此第二个元素淡出和进入)。而第二个元素只是在容器

这更短，而且，对于第一次运行，最好由fadeOut()而不是hide()隐藏目标

$(".caption").fadeOut(1);
$(".container").each(function() {
    $(this).mouseover(function() {
        $(".caption", this).stop().fadeIn(250);
    });
    $(this).mouseout(function() {
        $(".caption", this).stop().fadeOut(250);
    });
});

补充最后的注释;我明白了。我尝试了几种方式，也用标题position: absolute，但我不得不将第一个元素设置为position: absolute…现在它工作了(但不是褪色，但这是好的)。非常感谢您的帮助和支持!

相关文章：