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>