在鼠标悬停时使顶部元素淡出，底部元素淡入，然后在鼠标停止悬停后使顶部元素淡入？答案

【问题标题】：Make top element fade out and bottom element fade in on mouseover, then make top element fade back in after mouse stops hovering?在鼠标悬停时使顶部元素淡出，底部元素淡入，然后在鼠标停止悬停后使顶部元素淡入？
【发布时间】：2013-10-16 01:43:43
【问题描述】：

我正在尝试在 tumblr 上进行一些设置，这样当鼠标悬停在它上面时，我基本上可以将一个元素更改为另一个元素，例如：当鼠标悬停在图片上时，将图片更改为一个文本框，但是当鼠标移出文本框时，它又变回图片。

理想情况下，我希望图片顶部有一个单词，当我将鼠标悬停在图片上时，一个单词会消失，而我的其余文字会出现。

here is an example of what I want to happen

我已经搜索了好几个小时，但我找不到任何像我现在这样的东西。如果你想看代码，我是从here得到的。

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

如果有人知道我通过给出的示例要完成什么，您介意在 jfiddle 中设置它以便我可以看到我正在尝试做什么吗？谢谢你的帮助！

【问题讨论】：

标签： jquery css css-transitions transition

【解决方案1】：

可以通过jQuery实现hover和animate。

这里是my sample code。

html:

<img id="bg" src="http://www.stockfreeimages.com/White-and-grey-clouds-thumb10225136.jpg"/>       
<div class="title box">title</div>
<div class="content box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</div>

脚本：

$("#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();
});

css:

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

【讨论】：

【解决方案2】：

这是一个在 jQuery 函数中内置持续时间控件的示例。

这是一个 JSFiddle 示例：CLICK HERE

HTML：

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

CSS：

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

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

【讨论】：