jQueryによる喜びの絵文字「♪ワーイo(^∇^)oワーイ♪」アニメーション

jQuery による、喜びの絵文字「♪ワーイo(^∇^)oワーイ♪」のアニメーション。

実装例(サンプル)

♪ワーイo(^∇^)oワーイ♪

実装例(サンプル)の動作について

「実行」ボタンをクリックすると、「♪ワーイo(^∇^)oワーイ♪」の絵文字を、点滅させながら変化させる。アニメーション中は、「実行」ボタンを無効にし、クリックできないようになる。

実装例(サンプル)のソースコード

読み込み

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

「jQuery」を読み込む。

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . click(
        function() {
            jQuery( '#jquery-sample-button' ) . prop( 'disabled', true );
            jQuery( '#jquery-sample-emozi' )
                . fadeTo( 500, 0.01 )
                . queue( function() {
                    jQuery( this ) . text( '♪ワーイo(^∇^)oワーイ♪' ) . dequeue();
                } )
                . fadeTo( 500, 1 )
                . fadeTo( 500, 0.01 )
                . queue( function() {
                    jQuery( this ) . text( '♪♪ワーイo(^∇^)oワーイ♪♪' ) . dequeue();
                } )
                . fadeTo( 500, 1 )
                . fadeTo( 500, 0.01 )
                . queue( function() {
                    jQuery( this ) . text( '♪♪ワーイo(^∇^)oワーイ♪♪' ) . dequeue();
                } )
                . fadeTo( 500, 1 )
                . fadeTo( 500, 0.01 )
                . queue( function() {
                    jQuery( this ) . text( '♪ワーイo(^∇^)oワーイ♪' ) . dequeue();
                } )
                . fadeTo( 500, 1 );
            setTimeout( function() {
                jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
            }, 4000 );
        }
    );
} );
// -->
</script>

主に使用した jQuery API

CSS

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

HTML

<div id="jquery-sample">
    <p>
        <button id="jquery-sample-button">実行</button>
    </p>
    <div id="jquery-sample-emozi">♪ワーイo(^∇^)oワーイ♪</div>
</div>

スポンサード リンク

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