[ プログラミング ] 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);
        var capHeight = $wrap.find('div').outerHeight(true);
        $wrap.children('div').css({bottom : -capHeight});
        $wrap.hover(
            function () {
                $wrap.children('div').stop().animate({bottom : 0},'srow');
            },
            function () {
                $wrap.children('div').stop().animate({bottom : -capHeight},'srow');
            }
        );
    });
});
</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;
    position:absolute;
    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>

簡単なソースコードですが、自分でイチから制作すると色々と勉強になりますね。ハマってしまったところとしては、13行目、「$wrap.hover(…」のところで、「$wrap.find(‘img’).hover(…」としてしまったら挙動がおかしくなってしまって、原因がわからず暫く悩んでしまいました。

スライドアップあるいはスライドダウンのアニメーション中に、マウスを動かして、画像と説明文に交互にカーソルを合わせたら不思議な挙動になったのですが、よく考えたらそうなりますよね…。

あと、当たり前ですが、DEMOページで、最後の7番目の画像の説明文は、画像よりも大きいのですが、そういう場合、説明文がはみ出してしまいます。