続き]　divの背景画像を、徐々に表示させるには？

解決済

質問者：whoops101
質問日時：2008/04/07 10:57
回答数：3件

トップページの２つのdivボックスの背景画像を、徐々に表示されるようにするjavascriptを作って頂いたのですが、リピートをやめる方法を御教えいただくのを忘れてしまいました！
（http://oshiete1.goo.ne.jp/qa3921804.html）

リピートをとめるには、下記ソースをどのようにすればよろしいでしょうか？

------------------------------------------------------------
fade.js
------------------------------------------------------------
var after = 10;// 秒数を指定
var tid1;
var tid2;

window.onload = function () {
fdi2();
tid2=window.setInterval("fdi2()", after*1000);
};
function fdi2() {
var img1 = document.getElementById("limg");
img1.style.visibility = "visible";
fadeIn("limg", 0);
var img2 = document.getElementById("rimg");
img2.style.visibility = "visible";
fadeIn("rimg", 0);
}

function fadeIn(imgId, opacity) {
if (opacity <= 100) {
setOpacity(document.getElementById(imgId), opacity);
opacity += 10;
tid1=window.setTimeout("fadeIn('" + imgId + "'," + opacity + ")", 80);
} else {
window.clearTimeout(tid1);
}
}
function setOpacity(img, opacity) {
img.style.filter = "alpha(opacity:" + opacity + ")";
img.style.KHTMLOpacity = opacity / 100;
img.style.MozOpacity = opacity / 100;
img.style.opacity = opacity / 100;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： auty
回答日時：2008/04/08 15:22

・　「繰り返し」をやめて、開始を遅らせる秒数を指定することにしました。

・　ボタンは適当に除いてください。

------------------------------------------------------------
fade.js の最初の部分
------------------------------------------------------------
var after = 4;// 開始を遅らせる秒数を指定
var tid1;
var tid2;

window.onload = function () {
tid2=window.setTimeout("fdi2()", after*1000);
};

------------------------------------------------------------

- 0
- 件

通報する

この回答へのお礼

ありがとうございました！

あまりの遠回りに、もう見捨てられてしまったのかと・・・（汗
ほっとしました。
ありがとうございました！
とても感謝しています。

通報する

お礼日時：2008/04/08 18:51

No.2

回答者： auty
回答日時：2008/04/07 12:36

＞＞＞　さらに何秒後に表示させる、

これは、「繰り返し」ではなく開始を遅らせるということでしょうか。

もし「繰り返し」なら、止めるきっかけが必要です。

例えば、

「何回繰り返したら終了する。」

というようなことです。

前回は、ボタンをクリックしたらという例でした。

- 0
- 件

通報する

この回答へのお礼

＞これは、「繰り返し」ではなく開始を遅らせるということでしょうか。

はい、そうなんです。
説明不足で、大変申し訳有りません！

通報する

お礼日時：2008/04/07 12:44

No.1

回答者： auty
回答日時：2008/04/07 11:20

リピートをやめる方法もいろいろあると思いますが、

とりあえずボタンでとめる例です。
------------------------------------------------------------

<html>
<head>
<script type="text/javascript" src="fade.js"></script>
</head>
<style type="text/css">

</style>
<body>
<div id="limg" class="img1">
LEFT
<br /><br /><br />
</div>
<div id="rimg" class="img2">
RIGHT
<br /><br /><br />
</div>
<hr />
<button onclick="window.clearTimeout(tid2)">フェイドストップ</button>
</body>
</html>