そこで、要素をフェードインする次の関数を作成し、フェードインする div を渡しました。この場合、ユーザーがサイトの画像サムネイルをクリックしたときに表示する画像ギャラリー ポップアップです。また、タイムアウトが時間値に使用する速度値 (iSpeed) も渡します。この場合、25 (25ms) を使用しています。
期待どおりに機能しているように見えますが、この機能を実行しました。現在の不透明度が 1 未満の場合、不透明度が 1 に達するまでインクリメントされ、タイムアウト後に自分自身を呼び出します。不透明度が 1 に達すると、フェードを停止して戻ります。
そのため、ステップスルーした後、ブレークポイントを外して動作を確認しようとしましたが、何らかの理由でギャラリーがすぐに表示され、色あせがありません。
var Effects = new function () {
this.Fading = false;
this.FadeIn = function (oElement, iSpeed) {
//set opacity to zero if we haven't started fading yet.
if (this.Fading == false) {
oElement.style.opacity = 0;
}
//if we've reached or passed max opacity, stop fading
if (oElement.style.opacity >= 1) {
oElement.style.opacity = 1;
this.Fading = false;
return;
}
//otherwise, fade
else {
this.Fading = true;
var iCurrentOpacity = parseFloat(oElement.style.opacity);
oElement.style.opacity = iCurrentOpacity + 0.1;
setTimeout(Effects.FadeIn(oElement, iSpeed), iSpeed);
}
}
}
ここでギャラリーを設定します。
this.Show = function (sPage, iImagesToDisplay, oSelectedImage) {
//create and show overlay
var oOverlay = document.createElement('div');
oOverlay.id = 'divOverlay';
document.body.appendChild(oOverlay);
//create and show gallery box
var oGallery = document.createElement('div');
oGallery.id = 'divGallery';
oGallery.style.opacity = 0;
document.body.appendChild(oGallery);
//set position of gallery box
oGallery.style.top = (window.innerHeight / 2) - (oGallery.clientHeight / 2) + 'px';
oGallery.style.left = (window.innerWidth / 2) - (oGallery.clientWidth / 2) + 'px';
//call content function
ImageGallery.CreateContent(oGallery, sPage, iImagesToDisplay, oSelectedImage);
//fade in gallery
Effects.FadeIn(oGallery, 25);
}
誰か助けてくれませんか?
また、私はIE10を使用しており、Chromeも試しましたが、同じ結果です。
ありがとう、アンディ