淡入淡出效果的麻烦

Question

我试图在悬停 效果时创建一个简单的 淡入淡出。

默认情况下，带有文字的黑条应该是不可见的，一旦将鼠标悬停在图像上，它就会慢慢淡入。

我已经搜索并尝试了一些不同的方法，但还没有完成它的工作。

其中一种方法是this one，这非常简单且本来应该有效，但出于某种原因它没有...

任何帮助都将受到高度赞赏。感谢。

这是我目前的情况：

HTML：

<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>

CSS：

.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;
}

JSFiddle

Answer 1

这样的事情应该有效：

http://jsfiddle.net/8D25H/5/

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

Answer 2

这是一个CSS解决方案：http://jsfiddle.net/Mr853/。我还清理了你的一些代码。

HTML：

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

CSS：

*, :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;
}