Jquery 在鼠标上方使顶部元素淡出，底部元素淡入，然后在鼠标停止悬停后使顶部元素淡入？

我试图在tumblr上设置一些东西，这样当鼠标悬停在一个元素上时，我基本上可以将一个元素更改为另一个元素，例如：当鼠标悬停在图片上时，将图片更改为文本框，但当鼠标离开文本框时，它会更改回图片

理想情况下，我希望图片顶部有一个单词，当我将鼠标悬停在图片上方时，一个单词消失，剩下的文本进入

我已经找了好几个小时了，但我没有找到任何像我现在这样的东西。如果你想看密码，我从你那里得到的

有很多代码，我真的不知道我在做什么。我试着从示例中提取代码并将其交叉植入到代码中，但是太多了

---

如果有人通过给出的例子知道我想要完成什么，你介意用jfiddle来设置它，这样我就可以看到我想要做什么了吗？谢谢你的帮助

它可以通过jQuery和

这是

html:

css:

---

下面是一个jQuery函数内置了持续时间控件的示例

下面是一个JSFIDLE示例：

HTML:

jQuery：

$('.image-holder').hover(function () {
    $('.fade-in', this).stop().animate( {
        opacity: 1});
    $('.slide-in', this).stop().animate({
        opacity: 0,
        left: "120px",
    }, 1000);
}, function() {
    $('.fade-in', this).stop().animate( {
        opacity: 0});
    $('.slide-in', this).stop().animate({
        opacity: 1,
        left: "10px",
    }, 1000);
});

$("#bg").hover(function(){
 $(".title").stop().animate({left:"300px",opacity:0.0},1000,function(){$(this).hide()});
    $(".content").fadeIn();
},function(){
    $(".title").stop().show().animate({left:"100px",opacity:1.0},1000)
    $(".content").fadeOut();
});

.box{
    position:absolute;
    left:100px;
    color:white;
    z-index:1;
    pointer-events:none;
}
.title{
    top:70px;
}
.content{
    top:100px;
    width:300px;
    display:none;
}

<div class="image-holder">
    <div class="slide-in">Bob Marley</div>
    <div class="fade-in">Open your eyes, look within. Are you satisfied with the life you're living?</div>

.image-holder {
    position: absolute;
    width: 350px;
    height: 400px;
    top: 20px;
    left: 20px;
    background-image: url("http://samuiartsandcrafts.com/images/watermarked/1/thumbnails/1/400/bob-marley-pop-art-e.jpg");
    background-position: center;
    background-size: cover;
}
.slide-in, .fade-in {
    position: absolute;
    font-family:"Courier", sans-serif;  
}
.slide-in {
    opacity: 1;
    left: 10px;
    top: 0;
    font-size: 22px;
}
.fade-in {
    opacity: 0;
    left: 0px;
    padding: 10px;
    bottom: 10px;
    width: 350px;
    background: rgba(0, 0, 0, .5);
    font-size: 18px;
    color: #FFFFFF;
}

$('.image-holder').hover(function () {
    $('.fade-in', this).stop().animate( {
        opacity: 1});
    $('.slide-in', this).stop().animate({
        opacity: 0,
        left: "120px",
    }, 1000);
}, function() {
    $('.fade-in', this).stop().animate( {
        opacity: 0});
    $('.slide-in', this).stop().animate({
        opacity: 1,
        left: "10px",
    }, 1000);
});