javascript - jQuery:是否可以同时使用 slideUp 和追加文本？

Question

当用户将鼠标悬停在图片上时，我想slideUp 一段描述，这样新的文本就会出现。当用户鼠标移开时，描述将slideDown。

这是我到目前为止尝试过的:

$pic1.hover(function () {
        var text1 = $("<div>Price1:$100</div>").hide();
        text1.appendTo($('.this')).slideUp("slow");
    },function () {
        $(this).slideDown();
    }
);

不幸的是，这不起作用。我用谷歌搜索，但找不到任何东西。是否可以使用slideUp 和slideDown 显示和隐藏文本？

Answer 1

更好的方法是使用 CSS 过渡。它们重量轻且易于操作。您可以阅读有关转换的规范 here .这是一个 quick guide关于这件事。

fiddle

HTML

<div class="imageDiv">
    <img src="http://placekitten.com/g/200/300" />
    <div class="imageDescription">
        What a lovely kitty kat!
    </div>
</div>

CSS

.imageDiv {
    display: block;
    float: left;
    overflow: hidden;
    position: relative;
    width: 200px;
}
.imageDescription {
    -webkit-transition: top 0.5s ease;
    -moz-transition: top 0.5s ease;
    -ms-transition: top 0.5s ease;
    -o-transition: top 0.5s ease;
    transition: top 0.5s ease;
    
    background: rgba(0, 0, 0, 0.4);
    color: #f7f7f7;
    left: 0;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: 100%;
    width: 100%;
}
.imageDiv:hover .imageDescription {
    display: block;
    top: 93%;
}

有几个关键因素可以使这项工作成功。首先，使用 CSS 过渡。转换以下列形式编写:

transition: [property] [duration] [timing-function] [delay];

如上例所示，我使用了一个针对 top 属性的 transition。我给了它 0.5s 持续时间和 ease 效果。然而，仅此一项并不会产生效果，因为描述只会位于图像下方并在悬停时向上移动。在用户将鼠标悬停在图片上之前，我们不想看到描述!

要解决这个问题，您需要将 overflow: hidden; 添加到父级 div.imageDiv。这样就隐藏了图片描述，直到过渡时，才会向上滑动，使其不再溢出。