Question

我有一个简单的自动幻灯片放映设置。

<div id="slideshow1" class="slideshow_container"/>
<!-- Image 1, this one is behind the div below -->
   <div id="slideshow2" class="slideshow_topimage"/>
      <!-- Image 2, the one on top which will do all of the fading -->
   </div>
</div>

所以，首先“幻灯片2”将淡化为不透明，一旦褪色，它的背景图像将交换。然后它将淡入视图，“slideshow1”将切换到下一个图像。

以下是我的所有JavaScript，如何使“fadeEffect”功能继续运行代码，以便在完成淡入淡出后交换图像？

//Fetch images for slideshow
function slideshowPrep(container) {
    var http = getHTTPObject();
    http.onreadystatechange = function() 
    {                   
        if (http.readyState == 4 && http.status == 200)
        {
            //Split images
            var imgs = http.responseText.split(",");
            imgs = cleanArray(imgs);
            preload(imgs);
            slideshowGo(imgs);
        }
    }
    http.open("GET", ROOT_DIR+"/php/returnImages.php");
    http.send();
}
//Manage the image swapping and execute the fading
function slideshowGo(imgs,next) {
    var next = 0;
    var con1 = doc("slideshow2").style.backgroundImage; //"url('')";
    fadeEffect.init('slideshow2',0);

}
var fadeEffect = function() {
    return{
        init:function(id, flag, target) {
            this.elem = doc(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);
        },
        tween:function() {
            if(this.alpha == this.target) {
                clearInterval(this.elem.si);
            }else{
                var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
                this.elem.style.opacity = value / 100;
                this.elem.style.filter = 'alpha(opacity=' + value + ')';
                this.alpha = value; 
            }
        }
    }
}();

修改好的，添加了我认为是回调，但警报没有执行......？

//Manage the image swapping and execute the fading
function slideshowGo(imgs,next) {
    var next = 0;
    var con1 = doc("slideshow2").style.backgroundImage; //"url('')";
    fadeEffect.init('slideshow2',0,0,function(x) {
        alert(x);
    });
}
var fadeEffect = function() {
    return{
        init:function(id, flag, target, callback) {
            this.elem = doc(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);
        },
        tween:function() {
            if(this.alpha == this.target) {
                clearInterval(this.elem.si);
                this.callback("callback?");
            }else{
                var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
                this.elem.style.opacity = value / 100;
                this.elem.style.filter = 'alpha(opacity=' + value + ')';
                this.alpha = value; 
            }
        }
    }
}();

修改

仍然无法正常工作，将回调更改为此，就像你说的那样：

this.callback =“callback”;

幻灯片放映功能中的警报根本不会触发：

fadeEffect.init('slideshow2',0,0,function(x) {
        alert(x);
    });

Answer 1

这不是淡化效果完成的地方吗？

        if(this.alpha == this.target) {
            clearInterval(this.elem.si);
            // fire callback or increment loop counter or doNext()
            if (typeof cb === "function"){
                 // you can also pass any args that 
                 // may be useful to a callback here
                 cb();
            }
        }

Simplified jsfiddle

Answer 2

如果你想使用jquery淡出，那么淡出就是以下内容：

    $('#slideshow2').fadeOut( "slow", function() {
        // Animation complete. perform the next action...
    });

http://api.jquery.com/fadeout/

检测JS Fade何时完成，并运行更多代码

2 个答案: