JavaScript

トップ > チップス > JavaScript

文字を明滅させる

ページ内のちょっとしたメッセージを更新するときに、ユーザに気付かれ易くするための工夫です。勿論、もっとデザインを工夫して分かりやすくした方がベターですが、これくらいでも十分な場面もありそうです。

まず、表示対象エリアをフェードアウトし、テキストを更新してから、再びフェードインさせています。普通にメソッドチェーンで繋ぐとフェードアウトの途中でテキストが書き変わってしまい、なんだかせわしない感じになってしまうため、fadeOutの完了ハンドラを利用して残りの処理を起動しています。

function fade_out_in(){
  var message = new Date()+"";
  $("#message").fadeOut(function(){
    $(this).text(message).fadeIn();
  });
}


例

実行ボタンを押すと、メッセージエリアに現在時刻が表示されます。

メッセージエリア

実行

参考URL

• タグ別一覧: [js] [jquery]
• チップス一覧