jquery - jQuery Slidedown 函数

Question

在使用 JQuery 时，我还很陌生。我知道我想做的是非常基本的。

基本上，我需要创建一个在单击图像时向下滑动的“标题”框。

用户单击图像，底部会滑出一个小标题框，向他/她描述他刚刚单击的内容。

我创建了一个小图像来进一步阐明我需要做什么。

Answer 1

http://api.jquery.com/slideDown/ 在这里你可以看到一些示例，真的很简单：

$('#ImageID').click(function() {
    $('#captionboxID').slideDown('slow');
});

Answer 2

您应该查看 TheNewBoston 是 youtube 上的一个频道，它告诉您如何从头开始使用 jQuery。

这是一个例子。我认为这可以帮助你。

$(document).ready(function() {

    $('.box-img').click(function() {
        $('.box-caption').slideDown('slow');
    });

});

CSS：

.box-img {
    width: 100px;
    height: 100px;
    border: thin solid gray;
    position: relative;
}

.box-caption {
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 0px;
    background-color: #d4d4d4;
    display: none;
}

HTML：

<div class="box-img">
    my image

    <div class="box-caption">my caption</div>
</div>