jQueryのfadeIn・fadeOutメソッドで遊んでみた

2013 年 8 月 25 日 日曜日 by Koh(3,406 views)

jQuery  

今回はJavaScriptライブラリの「jQuery」のfadeIn・fadeOutメソッドで遊んでみました。fadeIn・fadeOutメソッドでどのようなことが出来るかというと、まずは以下のボタンを押下してください。



※注:PC表示でのみ動きます。


当ブログのヘッダー部分に「Welcome to Koh's WebSite!」というラベルが表示され、消えましたでしょうか?そうです、このような動きをウェブサイトに加える事ができるのです。

 

jQueryライブラリーはhttp://jquery.com/download/よりダウンロードし、<script src="***.js"> </script>で読む込む事により使用可能となります。

 

今回実装したjQueryのソースは以下の通りです。

 
(function($){
  $.doWelcome = function(params) {

    var msglavel = "";
    msglavel += "div id='MessageBox'><p>";
    msglavel += params.message;
    msglavel += "</p></div>";

    $(msglavel).hide().appendTo("body").fadeIn(1500);

    setTimeout(function() {
    $("#MessageBox").fadeOut(function(){
      $(this).remove();
    })},4000);

  }
})(jQuery);

function doMessage(msg) {
  $.doWelcome({
    'message' : msg
  });
}
 

doMessage("Welcome to Koh's WebSite!")でfunctionを呼び出すことでメッセージラベルが表示されます。表示位置や表示スタイルはCSSを使用して調整してください。

 

投稿時点では、一日の初めに当ブログに訪れた際、該当のメッセージが表示されるように設定していまーす。

 





コメントは受け付けていません。


Mobile Site Link