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( 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。
- jQuery( '#id' )
- click( fn )
- text( textString )
- prop( propertyName, value )
- fadeTo( duration, opacity )
- queue( [queueName,] callback( next ) )
- dequeue( [queueName] )
CSS
<style>
<!--
#jquery-sample {
margin: 10px;
}
#jquery-sample-emozi {
text-align: center;
margin: 10px;
width: 250px;
}
-->
</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>
<p>
<button id="jquery-sample-button">実行</button>
</p>
<div id="jquery-sample-emozi">♪ワーイo(^∇^)oワーイ♪</div>
</div>