jQueryによる走る絵文字「ε=ヽ(*￣∇￣)ノ」アニメーション

投稿日: 2012年1月8日 作成者: alphasis

jQuery による、走る絵文字「ε=ヽ(*￣∇￣)ノ」のアニメーション。

実装例（サンプル）

ヽ( ￣∇￣)ノ

実装例（サンプル）の動作について

  • 「スタート！！」ボタンをクリックすると、「ヽ( ￣∇￣)ノ」の絵文字の左横に、0.5秒ごとに、「ε=」を追加していく。「ε=」が11個現れたら、アニメーションを終了する。
  • アニメーション中は、「スタート！！」ボタンを無効にし、クリックできないようになる。
  • アニメーションが終了すると、「スタート！！」ボタンのテキストを「位置について」に変更する。
  • 「位置について」ボタンをクリックすると、絵文字を「ヽ( ￣∇￣)ノ」に戻し、ボタンのテキストを「スタート！！」に戻す。

実装例（サンプル）のソースコード

読み込み

<script type="text/javascript" src="jquery.min.js"></script>

「jQuery」を読み込む。

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . toggle(
        function() {
            jQuery( '#jquery-sample-button' ) . prop( 'disabled', true );
            jQuery( '#jquery-sample-emozi' ) . text( 'ε=ヽ(*￣∇￣)ノ' );
            var count = 0;
            setTimeout( function progress() {
                count ++;
                if( count <= 10 ) {
                    jQuery( '#jquery-sample-emozi' ) . prepend( 'ε=' );
                    setTimeout( progress, 500 );
                }
            }, 500 );
            setTimeout( function() {
                jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
                jQuery( '#jquery-sample-button' ) . text( '位置について' );
            }, 5500 );
        },
        function() {
            jQuery( '#jquery-sample-button' ) . text( 'スタート！！' );
            jQuery( '#jquery-sample-emozi' ) . text( 'ヽ( ￣∇￣)ノ' );
        }
    );
} );
// -->
</script>

主に使用した jQuery API。

CSS

<style>
<!--
#jquery-sample {
    margin: 10px;
}
#jquery-sample-emozi {
    text-align: left;
    margin: 10px;
}
-->
</style>

HTML

<div id="jquery-sample">
    <p>
        <button id="jquery-sample-button">スタート！！</button>
    </p>
    <div id="jquery-sample-emozi">ヽ( ￣∇￣)ノ</div>
</div>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, アニメーション パーマリンク