文字をフェードインする方法とは?

このQ&Aのポイント
  • 文字をフェードインさせる方法について説明します。
  • サンプルのコードを使用して文字をフェードインさせる手順を解説します。
  • 文字列を指定してフェードインさせたい箇所を設定し、HTMLに組み込むことで実現します。
回答を見る
  • ベストアンサー

文字をフェードインするHTML教えて下さい

infoseekで勉強しながら会社のHP作ってますが、 文字をフェードインする方法が上手くいきません。 <script language="JavaScript"> <!-- count=0; Num=1; Time=100; function FadeIn(str){ c=str.charAt(count++); for(i=0;i<Num;i++){ document.all["Fade"+i].style.color="#"+c+c+c+c+c+c; } if(count<str.length){ setTimeout("FadeIn('"+str+"')",100); } } //--> </script> 次に、<body>タグ内を<BODY onload="FadeIn('fedcba9876543210')" >と変更すると、JAVAスクリプトの準備は終了になります。 後は、フェードインさせたい文字を、<span id="Fade0">文字列</span>と設定します。これで、文字がじんわりとフェードインして現れます。 上記はサンプルのコピーで、固定のバナーの下にHPへようこそ!という文字がフェードインします。 なのですが、どの部分がバナーのHTMLか、文字のHTMLか分からなく、 >>、<span id="Fade0">文字列</span> この意味もわかりません。表示したい文字を「文字列」に置き換えれば良いのですか??そしてこの一文をどこに組み込めば良いのかもわかりません・・・。 何度かやってみましたがエラーになってしまいます。 他の方法でも良いので、お解かりになるかた宜しくお願いいたします!

noname#86536
noname#86536

質問者が選んだベストアンサー

  • ベストアンサー
noname#140925
noname#140925
回答No.1

id Fade0 で指定されたタグの中の文字列をフェードアウトする仕組みです。 表示したい位置に「 <span id="Fade0">フェードアウトしたい文字列</span> 」を書いて下さい。

関連するQ&A

  • 黒背景で、白文字(リンク挿入)をフェードインするHTMLソースを教えて

    黒背景で、白文字(リンク挿入)をフェードインするHTMLソースを教えてください。 <head>の間に、 <script language="JavaScript"> <!-- var count = 0; var f3 = "0123456789abcdef"; function fadein(i) { if ( count < 16 ) { c = f3.charAt(i); document.fgColor = c + c + c + c + c + c; count++; setTimeout("fadein(count)",100); } } fadein(); //--> </script> </head> <body bgcolor="#000000" text="#ffffff"> 以上のタグを入れ、 <body bgcolor="#000000" text="#ffffff"> タグを<body>の代わりに置くと、リンク挿入されていない文字はフェードインされるのですが、リンク挿入文字は対応されません。 ソースをどのようにすれば、リンク挿入文字もフェードイン対応されるでしょうか。

  • 3枚の画像をフェードイン

    3枚の画像を順番にフェードインさせたいのですが、IEで確認すると先にパっと画像が表示された後にすぐにその画像が消えてフェードインが次々始まります・・・。何かソース等ミスがあるのかIE対策をしないといけないのかわかりません・・。ページを表示させたあと更新を押すと正常に動くのですがブラウザを閉じて再度表示させるとまたパっと画像が現れた後にフェードインが始まる感じです。 ソースは下記になります。 最初のパッと画像が現れる原因と対策を教えてください・・・! <script type="text/javascript"> $(function(){  $('#fade li').hide(); }); $(window).bind("load", function(){  var interval = 400; //表示間隔  for(var i=0; i<$('#fade li').length; i++)   setTimeout(doFade(i), interval * i);  function doFade(i){   return function(){ $('#fade li').eq(i).fadeIn(2000); };  } }); </script> 【HTML】 <ul id="fade"> <li><img src="image/mainpx_01.jpg" alt="" width="365" height="484" style="display: inline; " /></li><li><img src="image/mainpx_02.jpg" alt="" width="365" height="484" style="display: inline; " /></li><li><img src="image/mainpx_03.gif" alt="" width="270" height="484" style="display: inline; " /></li></ul>

  • jQueryでの画像のフェードインのループ

    jQuery初心者です。 jQueryで3枚の背景画像がフェードインで切り替わり、ループするようにしたいのですが、 下記のように書いてみたのですが、1週ループまでは上手くいくのですが、2週目に2枚目の画像で止まってしまいます。 下記だと何故2週目の2枚目で止まるのか?の原因と、スマートな書き方をご教授頂けませんか? <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <script> $(function() { $("div.fadein_1").fadeIn(1000); setInterval(function(){ $("div.fadein_2").delay(4000).fadeIn(1000, function(){ $("div.fadein_3").delay(4000).fadeIn(1000, function(){ $("div.fadein_2").attr('style', 'display:none;'); $("div.fadein_3").fadeOut(1000, function(){ clearQueue(); }); }); }); }, 0); }); </script> <div class="fade"> <div class="fadein_1" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_2" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_3" style="display:none;"></div> </div>

  • jQueryでfadeInのタイミング(Speed

    jQueryを勉強中で、こちらのページにある、 時間差で要素がフェードインするスプリクトを 参考にさせていただいています。 http://y-growth.com/blog/archives/281.html サンプルでは、 $("#fade li:nth-child(1)").fadeIn("5000",function() { $("#fade li:nth-child(2)").fadeIn("5000",function() { $("#fade li:nth-child(3)").fadeIn("5000", function(){ となっていて、等間隔でフェードインさせています。 このフェードの間隔を調整したいのですが、 $("#fade li:nth-child(1)").fadeIn("50000",function() { $("#fade li:nth-child(2)").fadeIn("10000",function() { $("#fade li:nth-child(3)").fadeIn("5000", function(){ このようにSpeedの値を変更しても、 等間隔でフェードインしてしまいます。 また、このような指定でも、同時にフェードインしてしまいます。 $("#fade li:nth-child(1)").fadeIn("50000"); $("#fade li:nth-child(2)").fadeIn("10000"); 何か見落としがあるのでしょうか? どなたか、どうぞよろしくお願いいたします。

  • flashで、フェードインする文字を作る方法を教えて下さい。

    いま、フリーソフトのsuzukaを使って、携帯用flashを作っています。 http://flashrave.org/anima/fade_in/ ↑のページで紹介されているような、フェードインする文字を作りたいのですが(オンマウス操作はいりません)、suzukaでの操作が紹介されていないので、やり方がわかりません。汗 因みに、まだflashを始めたばかりで詳しい操作が分からないので、 なるべく細かく教えて頂けると助かります; どうぞよろしくお願いします。

  • jQueryで、画像クリック→フェードイン

    初めまして。私は大学の課題でウェブサイトを作成しており、jQueryを勉強しています。 かなりの初心者なのです。 今jQueryでイメージギャラリーのようなものを作っていて、小さい画像にマウスオーバーで触れると、となりに大きい画像がフェードインしつつ表示されるというようにしたいです。 DW上では画像もかわりますし、フェードインもうまくいったのですが、ブラウザで見てみると、画像がぱっと変わるだけでフェードインの効果が反映されていません。 これは何故なのでしょうか・・・。 スクリプトの例は以下です。 $(function(){ $("img.top1").mouseover(function(){   $("#mainimg img").attr("src","img/topimg1.jpg");   $("#mainimg p:not(:animated)").fadeIn("slow"); }) ・・・・ 小さい画像のtop1に触れると、divのmainimgという範囲の画像が、top1からtopimg1に変わって、なおかつフェードインされるという風に書いたつもりです・・・。 #mainimgの「p」は、htmlでは、<p id="fadeIn"><img src="img/topimg1.jpg" width="539" height="343" /></p> というように、#mainimgの範囲のimg要素(大きい画像が表示されるところ)の前に、id名にfadeInと入れた部分のpです。 スクリプトに何か問題があるのかどうかもわかりません。 しかしブラウザで作動しないのはおかしいですよね。 どなたか分かる方がいれば教えてくださると嬉しいです。 よろしくお願いいたします。

    • ベストアンサー
    • AJAX
  • リンクをマウスオーバーでフェードイン・アウトがしたです。

    リンクをマウスオーバーでフェードイン・アウトがしたです。 以下のようなソースを書いたのですが、ページを開いた1回目のみ、画像と文字がフェードインして、以下のリンクをマウスオーバーした時には、普通に画像と文字が入れ替わります。リンクをマウスオーバーした時にもフェードイン・アウトさせるには、どのように変更すればいいのでしょうか? <html> <head> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('div').fadeIn("slow"); }); </script> <head> <body> <div style="display:none;"> <img src="img/1.png" name="foo"> <br> <span id="buntate">眺める</span> </div> <a href="javascript:void(0)" onmouseover="document.foo.src='img/2.png';document.all.buntate.innerText='サーファー';" onmouseout="document.foo.src='img/1.png';document.all.buntate.innerText='眺める';"> hoge1</a> <br> <a href="javascript:void(0)" onmouseover="document.foo.src='img/3.png';document.all.buntate.innerText='海';" onmouseout="document.foo.src='img/1.png';document.all.buntate.innerText='眺める';"> hoge2</a> </body> </html> 沢山いろいろと試したのですが、自分で解決出来ず・・・ ごご教授、よろしくお願いいたします。

  • 5秒後にフェードイン

    以下の画像がフェードインするプログラムで、5秒後にフェードインを実行するように設定するにはどうしたらよいでしょうか? どなたかご教授ください。 <script language="JavaScript"> <!-- function fadein(id) { app = navigator.appName.charAt(0); ver = navigator.appVersion.charAt(0); if ((app == "M") && (ver >= 4)) { document.all.item(id).style.visibility = "hidden"; document.all.item(id).filters[0].apply(); document.all.item(id).style.visibility = "visible"; document.all.item(id).filters[0].play(); } } // --> </script> </head> <body bgcolor="white" text="red" link="blue" vlink="purple" alink="red" class="style" onload="fadein('img1');"> <p align="right"> <img src="non.jpg"    id="img1" style="filter:revealTrans(duration=3.0,Transition=12); visibility=hidden;"> </p> </body>

  • 画像をフェードインさせるタグについて

    HP作成の際、 画像をフェードインさせたいのですが、 以下のタグをコピーして貼り付けても エラーになります。 どこを修正したらよいのでしょうか? よろしくお願いします<m(__)m> <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- spd = 50; ntc = 2; fii = new Array("ia","ib","ic"); cnt = 0; i = 0; function fdInImg() { document.images[fii[i]].filters['alpha'].opacity = cnt; cnt += ntc; if(cnt >= 100) { cnt = 0; i++; } if(fii.length <= i) return; setTimeout("fdInImg()",spd); } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="fdInImg()"> 画像が順番にフェードインします。<BR><BR> <IMG src="画像のアドレス"> <IMG src="画像のアドレス"> <BR><BR> </BODY> </HTML>

  • javascriptでのフェードイン

    javascriptを使用してhtml上の画像をフェードインにて表示したいと思っております。 ネット上の情報とこちらのサイトでのアドバイスを元に以下のソースを使用しておりますが WindowsのIE(6&7)で確認すると「エラー:オブジェクトがありません」と表示されてしまいます。 こちらで確認したところjavascript最後の行の「window.onload~」がエラーの原因となっているようなのですが、 修正する記述方法が分からず困っております。 解決策をご存じの方がおられましたらお手数ですが、 ご教授いただけないでしょうか。 何卒、宜しくお願い申し上げます。 ///javascript file(fade.js)/// document.write("<style type='text/css'>#thephoto1 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto2 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto3 {visibility:hidden;}</style>"); function initImage() { for(i=1;i<4;i++){ imageId = 'thephoto' + i; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 25; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() { initImage() } //////////////////////// ///html file/// <html> <head> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto1" /> <img src="img_02.jpg" id="thephoto2" /> <img src="img_03.jpg" id="thephoto3" /> </body> </html> ////////////////////////

専門家に質問してみよう