[ プログラミング ] jQueryで画像の説明文をフェードインして表示する方法

画像にマウスオーバーすると、説明文が下からニョキッとスライドアップして、マウスアウトするとスライドダウンするものをjQueryを利用して作ってみました。

前回の記事の応用です。(というか、こちらのほうが簡単に作れました。)

デモは以下からどうぞ。

DOMO

HTML5でコーディングしています。jQueryもCSSもHTMLのheadタグ内に書いています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>[DEMO]jQueryで画像の説明文をフェードインして表示する方法</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
    $('.photolist').each(function() {
        var $wrap = $(this);
        $wrap.hover(
            function () {
                $wrap.children('div').stop().fadeIn();
            },
            function () {
                $wrap.children('div').stop().fadeOut();
            }
        );
    });
});
</script>
<style>
body {
    margin:0;
}

.photolist {
    position:relative;
    overflow:hidden;
    float:left;
    width:300px;
    margin:10px;
}

.photolist img {
    vertical-align:bottom;
}

.photolist div {
    box-sizing:border-box;
    overflow:hidden;
    display:none;
    position:absolute;
    bottom:0;
    width:100%;
    padding:10px;
    color:#fff;
    background:#000;
    opacity:0.8;
}
</style>
</head>
<body>
<div class="photolist">
    <img src="images/photo.jpg" alt="">
    <div>写真の説明文です1。</div>
</div>
<div class="photolist">
    <img src="images/photo.jpg" alt="">
    <div>写真の説明文です2。…</div>
</div>
<div class="photolist">
    <img src="images/photo.jpg" alt="">
    <div>写真の説明文です3。…</div>
</div>
<div class="photolist">
    <img src="images/photo.jpg" alt="">
    <div>写真の説明文です4。…</div>
</div>
<div class="photolist">
    <img src="images/photo.jpg" alt="">
    <div>写真の説明文です5。…</div>
</div>
<div class="photolist">
    <img src="images/photo.jpg" alt="">
    <div>写真の説明文です6。</div>
</div>
<div class="photolist">
    <img src="images/photo.jpg" alt="">
    <div>写真の説明文です7。…</div>
</div>
</body>
</html>