Jquery 悬停效果上的淡入问题

我正在尝试创建一个简单的悬停淡入效果

默认情况下，带有文本的黑色条应该是不可见的，当您将鼠标悬停在图像上时，这些条会慢慢淡入

我已经搜索并尝试了几种不同的方法，但还没有完全奏效

其中一种方法是，这是非常简单的，应该是有效的，但由于某些原因，它没有

我们将非常感谢您的帮助。谢谢

这是我目前的情况：

HTML:

---

像这样的方法应该会奏效：

这里有一个CSS解决方案：。我还清理了你的一些代码

HTML:

---

在这种情况下，JavaScript是不必要的。它确实可以工作，但有一个小问题。当你在黑条上盘旋时，它会不断地淡入淡出。。。这不应该发生，图像在黑条后面，所以它们应该一直保持不变。你知道为什么会发生这种情况以及如何解决它吗？谢谢

<div id="panel4" class="panels" style="cursor: move; z-index: 48">
<div class="title"><span>&nbsp;TITLE | THIS IS THE TITLE</span></div>
<div id="picture4"><img src="http://i.imgur.com/fbEGCcY.png"></div>
<div class="footer"><span>FOOTER | THIS IS THE FOOTER&nbsp;</span></div>
</div>

.panels {
position: absolute;
}

#panel4 {
position: relative;
display: inline-block;
}

#picture4 {
width: 480px;
height: 360px;
}

.title {
width: 100%;
height: 20px;
color: #fff;
background: #000;
font-family: Monaco;
font-size: 10px;
font-weight: normal;
text-align: left;
line-height: 20px;
position: absolute;
}

.footer {
width: 100%;
height: 20px;
color: #fff;
background: #000;
font-family: Monaco;
font-size: 10px;
font-weight: normal;
text-align: right;
line-height: 20px;
bottom: 0;
position: absolute;
}

span {
vertical-align: middle;
display: inline-block;
line-height: normal;
}

<script>
$(function(){
    $("#picture4").hover(function(){
$(this).parent().children(".title, .footer").fadeToggle(800);
});
});
</script>

<div class = "container">
    <header>TITLE | THIS IS THE TITLE</header>
    <footer>FOOTER | THIS IS THE FOOTER</footer>
</div>

*, :before, :after {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    padding: 10px;
}

.container {
    position: relative;
    width: 480px;
    height: 360px;
    background: url(http://i.imgur.com/fbEGCcY.png)
                no-repeat;
                100%;
    cursor: pointer;
}

.container > header, 
.container > footer {
    font: normal 10px/2 Monaco, Sans-Serif;
    background-color: #000;
    color: #fff;
    padding-left: 5px;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;

}

.container > footer {
    top: auto;
    bottom: 0;
    text-align: right;
    padding-right: 5px;
}

.container:hover > header,
.container:hover > footer {
    opacity: 1;
}