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

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, アニメーション パーマリンク