Javascript 带爬升文字的淡入效果

我需要在我的网页上实现渐变效果。 例子： 在主页上的这个例子中，我们看到当我们将鼠标悬停在图像上，然后图像淡入淡出，文本从顶部爬升。我所想象的是：

<div class="row pageTitle2">
<div class="col-md-12">
    <div class="row">
        <div class="col-md-4 marPadReset">
            <img src="~/Content/Images/4.jpg"/>
        </div>
    </div>
</div>

有人帮忙吗？

链接：

CSS

a { position: relative; display: inline-block }
a span {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: 0;
 background: black;
 color: #fff;
 opacity:0;
 transition:1s;
}

a:hover span {
 opacity:1;
}

HTML

<div class="row pageTitle2">
  <div class="col-md-12">
    <div class="row">
       <div class="col-md-4 marPadReset">
           <a href="#">
               <span>Some Text</span>
            <img src="~/Content/Images/4.jpg"/></a>
        </div>
    </div>
  </div>

解释

---

首先，您需要将图像包装在

anchor

标记中，并将要在悬停时显示的文本包含在

span

标记中。默认情况下，文本的

不透明度

为0，即

隐藏

。悬停时<代码>（a:hover span）不透明度设置为1-

可见

。背景为黑色，因此后面的图像不可见Transition属性将帮助它平滑地移动效果。

您可以将jQuery与一些

mouseenter

和

mouseleave

效果一起使用

$(function(){
    $(".bg").mouseenter(function(){
        $(".text").fadeIn(500);
    });

    $(".bg").mouseleave(function(){
        $(".text").slideUp(500);
    });

});

---

您可以使用CSS3转换，悬停时需要影响覆盖背景的不透明度和覆盖文本的边距

例如：

div#overlay_container:hover div#background {
    transition: opacity 1s ease-in-out;
    opacity: 0.6;
}

上面的覆盖悬停将以“轻松”的方式将不透明度更改为

0.6

覆盖的上方悬停将把

不透明度

更改为

1

，将

边距顶部

更改为

0

您可以看到JSFIDLE

---

如果您希望适应过时的浏览器，您可能需要使用基于Javascript的解决方案。

要在悬停屏幕上显示的文本在哪里？如果你能解释你的答案，你也不需要jquery，尽管它更好。当然。首先，您需要将图像包装在

anchor

标记中，并将要在悬停时显示的文本包含在

span

标记中。默认情况下，文本的

不透明度

将为

0

，这是隐藏的。悬停时（a：悬停范围）

opacity

设置为

1

可见。背景为黑色，因此后面的图像不可见Transition属性将帮助它平滑地移动效果。你必须在帖子中解释你的答案，否则没有人会得到你在这里的答案。因为OP已经使用jQuery/javascript来获得他/她的结果，而您在这里的回答中没有提到这一点。所以在你的帖子里这样做，你的答案就会值得注意。谢谢你的关注。你太棒了，这正是我需要的。非常感谢。谢谢你的关注。

div#overlay_container:hover div#background {
    transition: opacity 1s ease-in-out;
    opacity: 0.6;
}

div#overlay_container:hover div#text {
    transition: margin-top 2s ease-in-out, opacity 2s ease-in-out;

    opacity: 1;
    margin-top: 0px;
}