当用户将鼠标悬停在图片上时，我想要slideUp描述，以便出现新文本。当用户鼠标移开时，描述将slideDown.

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

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

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

更好的方法是使用 CSS 过渡。它们重量轻且易于制作。您可以阅读有关转换的规范here http://www.w3.org/TR/css3-transitions/#animatable-properties。这里有一个快速指南 http://css-tricks.com/almanac/properties/t/transition/就此事。

fiddle http://jsfiddle.net/Luxelin/5cf5Z/4/

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

从上面的例子可以看出，我使用了transition其目标是top属性。我给了它一个0.5s持续时间和ease影响。然而，仅此并不会产生效果，因为描述只会位于图像下方并在悬停时向上移动。在用户将鼠标悬停在图像上之前，我们不想看到描述！

为了解决这个问题，您需要添加overflow: hidden;给家长div.imageDiv。这会隐藏图像描述，直到过渡时，它才会向上滑动，使其不再溢出。