Javascript 单击图像时，使文本显示在图像下（向上滑动）

我希望当你点击图片时，文字描述会出现在图片下方（向上滑动），当你点击图片时，文字描述会再次隐藏（向下滑动）

JAVASCRIPT

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript">
      $(document).ready(function () {
        $("#image img").click(function () {
            $("#image span").slideToggle();
        });
    });
</script>

HTML

Lorem ipsum dolor sit amet，是一位杰出的献身者。

以上是我试图创建的代码的HTML，当您点击网站etchapps.com上的任何图像时，可以演示这种效果的一个示例，了解我们如何使用JavaScript或jQuery实现这一点。或者我们是否可以使用其他插件来完成此操作。

<div id="images">
        <div>
            <div id="thetext" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <img id="theimage" src="images/test-image.png" width="224px" height="224px" />

        </div>
</div>
</body>
    <script>

        $(document).ready(function () {
            $("#theimage").click(function () {
                $("#thetext").slideToggle();
            });
        });

    </script>

Lorem ipsum dolor sit amet，是一位杰出的献身者。
$（文档）.ready（函数（）{
$（“#图像”）。单击（函数（）{
$（“#文本”）.slideToggle（）；
});
});

其解决方案：

看看这把小提琴：

我对HTML做了一些修改：

<div id="images">
    <div id="image">
        <div class="image">         
            <img src="images/test-image.png" width="275px" height="200px" />
        </div>
        <div class="text">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        </div>
    </div>
</div>

---

这种效果的真正诀窍是使包含的包装器位置：relative，然后使该位置内的包装器：absolute，并将top/right/bottom设置为0。这将锚定到容器的底部，而不管标题在可见时的高度如何

然后，您所需要做的就是滑动切换标题元素的显示。在我的工作中，我们只是切换了一个类，并使用CSS转换来覆盖显示，但我已经调整了我们的方法，使其与您的代码内联

这里有一个

HTML

JS

---

我还建议从div切换到figcaption和caption元素，以获得更多语义标记，并且可能会切换掉类的id。您可能需要更新JS，以针对最近的标题，而不仅仅是任何标题。

非常感谢您的建议。我希望文本在加载时应该隐藏，在向上滑动时应该向上推图像，就像在网站etchapps.com上一样。目前已经修好了，你能修好吗？我已经包括了完整的代码源：我部分写了你引用的网站。

<div id="images">
        <div>
            <div id="thetext" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <img id="theimage" src="images/test-image.png" width="224px" height="224px" />

        </div>
</div>
</body>
    <script>

        $(document).ready(function () {
            $("#theimage").click(function () {
                $("#thetext").slideToggle();
            });
        });

    </script>

<div id="images">
    <div id="image">
        <div class="image">         
            <img src="images/test-image.png" width="275px" height="200px" />
        </div>
        <div class="text">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        </div>
    </div>
</div>

#images, #image .image {
    width: 275px;
    height: 200px;
}
#image .text {
    display: none;
    background: #000;
}
#image span {
    color: #ccc;
    padding: 2px;
}

<div id="images">
    <div id="image">
        <div>                
            <img src="http://placekitten.com/275/200" />
            <div id="caption">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>
</div>

#images {
    width: 275px;
    height: 200px;
}

#image {
  position: relative;
  width: 275px;
  height: 200px;
  overflow: hidden;
}

#image > div {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;


}

 #image img {
    display: block;
    width: 275px;
    height: 200px;
}

#caption {
    background: #000;
    color: #ccc;
    display: none;
    overflow: hidden;
}

#caption p {
  padding: 5px;
  margin: 0;
}

$(document).ready(function () {
    $("#image img").click(function () {
        $("#caption").slideToggle();
    });
});