fiddle

Question

当用户将鼠标悬停在图片上时，我想slideUp一个描述，以便显示新文本。当用户将鼠标移出时，说明将slideDown。

这是我迄今为止所尝试过的：

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

不幸的是，这不起作用。我用Google搜索，但无法找到任何东西。是否可以使用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];

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

要解决此问题，您需要将overflow: hidden;添加到父div.imageDiv。这会隐藏图像描述，直到转换，它将向上滑动，导致它不再溢出。

Answer 2

slideUp（）只会隐藏一个元素，而slideDown（）只会显示一个元素。如果要显示具有slideUp效果的元素或使用slideDown效果隐藏，则必须显式调用它：

$(text1).show("slide", { direction: "up" }, 1000);
$(text1).hide("slide", { direction: "down" }, 1000);

Answer 3

http://jsfiddle.net/qvbgb/3/

<强> HTML

<div class="imgcontainer">
    <div class="image">
        <img src="link.jpg" />
    </div>
    <div class="text">
        <h3>Product name</h3>
        <p>Description</p>
    </div>
</div>

<强> Jquery的

$(document).ready(function(){
    $('.text').hide();

    $('.container').hover(
        function () {
            $(this).find('.image').slideUp(); 
            $(this).find('.text').slideDown();
        },function () {
            $(this).find('.text').slideUp();
            $(this).find('.image').slideDown();
        }
    );
})

<强> CSS

.container{
    min-width : 150px;
    min-height : 150px;
    width : 150px;
    height : 150px;
    cursor : pointer;
    display : block;
}

.image img{
    width : 150px;
    height : 150px;
}

jQuery：是否可以同时使用slideUp和附加文本？

3 个答案:

fiddle