jQuery の fadeTo( duration, opacity ) で、点滅アニメーション

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

特定の要素を点滅させるアニメーションのサンプル。jQuery API の fadeTo( duration, opacity ) メソッドを使うと簡単だ。

実装例（サンプル）

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

「点滅」ボタンをクリックすると、青色のボックス要素を５回点滅させる。点滅中の５秒間は、「点滅」ボタンを無効にし、クリックできないようになる。

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

読み込み

<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-blink' )
                . fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
                . fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
                . fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
                . fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
                . fadeTo( 500, 0.25 ) . fadeTo( 500, 1 );
            setTimeout( function() {
                jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
            }, 5000 );
        }
    );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-sample {
    margin: 10px;
}
#jquery-sample-blink {
    margin: 10px;
    height: 200px;
    width: 200px;
    background-color: blue;
    border: 1px solid gray;
    border-radius: 50px;
}
-->
</style>

HTML

<div id="jquery-sample">
    <p>
        <button id="jquery-sample-button">点滅</button>
    </p>
    <div id="jquery-sample-blink"></div>
</div>

スポンサード リンク

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