hiramatch's blog

iOSアプリ開発に目覚め、毎日勉強の日々です。

jQuery ボックスのエフェクト

今日はドットインストールコムのjQuery入門 #12 エフェクトの動画を見た後
自分でプログラムを作ってみました。

サンプルそのままだと表示後すぐ消えて確認しにくいので
setTimeout関数で1秒後に消える様にしました。

<!DOCTYPE html>
<html lang='ja'>
<head>
    <meta charset='utf-8'>
    <title>#12 エフェクト</title>
</head>
<body>
    <div id="test" style="width:150px; height:50px; background:orange">
    <script src='../jquery-1.11.3.js'></script>
    <script>
        $(function(){
            // console.log('test');
            var $div = $('#test');
            setTimeout(function(){
                console.log('test');
                // $div.hide();        // ぱっと消える
                // $div.hide('800');  // ゆっくり
                // $div.fadeOut();     // ふわっと消える
                // ふわっと消えた後、アラート
                $div.fadeOut(
                    1000,
                    function(){
                        alert('test');
                    }
                );
            }, 1000);
        });
    </script>
</body>
</html>

f:id:hiramatch:20151206111624p:plain
f:id:hiramatch:20151206111703p:plain