ぬえさぶろうのAnimate放送部

解説

コンテンツのつくりかた

1. 画像にマウスオーバーで実行する
2. キャプション部分の要素を追加する
3. キャプション部分を表示する
4. マウスアウトで表示を元に戻す

HTML

ここには、HTMLのコードを入れる

<div id="test_display">
    <ul>
        <li><a href="../../../images/moving_logo.png">
        <img src="../../../images/moving_logo.png" alt="動くロゴ"></a>
    </li>
        <li><a href="../../../images/actionscript.png">
        <img src="../../../images/actionscript.png" alt="ActionScript3.0の使い方"></a>
    </li>
    <li>
        <a href="../../../images/character_animation.png"><img src="../../../images/character_animation.png" alt="キャラクターアニメーション"></a>
    </li>
        <li><a href="../../../images/lesson_room.png">
        <img src="../../../images/lesson_room.png" alt="ホワイトボードアニメーション"></a>
    </li>
    </ul>
        <!--/.test_display--></div>

CSS

ここには、CSSのコードを入れる

/*画像のキャプション表示*/
#test_display div{
    display:none;
    width:100%;
    height:100%;
    padding:20px;
    background:rgba(17, 179, 179, .4);
    color:#fff;
    position:absolute;
    top:0;
    left:0;
    box-sizing:border-box;
}
#test_display p{
    position:relative;
    top:10px;
}

JS

ここには、JSのコードを入れる

// 画像キャプション
$(function(){
    $("#test_display li a").hover(function(){
       //マウスオーバー時の処理
        //キャプション部分の追加
        $(this).append("
" + $("this").children("img").attr("alt") + "
");
        $(this).children("div").stop().fadeIn(300);
        $(this).children("div").children("p").stop().animate({"top" : 0}, 300);
    }, function(){
     //マウスアウト時の処理
        $(this).children("div").stop().fadeOut(300);
        $(this).children("div").children("p").stop().animate({"top" : "10px"}, 300, function(){
            $(this).parent("div").remove();
        });
    });
});