CODEWITHSUNDEEP
javascripthtmlslideshowfade
Martyn Ball
Martyn Ball

Reputation: 4885

Detect when JS Fade has completed, and run more code

I have the following setup for a simple automatic slideshow. 

<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>

So, first of all "slideshow2" will fade to opaque, once faded, it's background image will swap. It will then fade back into view and "slideshow1" will swap to the next image.

Below is all of my JavaScript, how would I make the "fadeEffect" function continue to run the code to swap images once its finished fading? 

//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; 
            }
        }
    }
}();

Edit: Okay, added what I believe to be a callback, but the alert does not execute...? 

//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; 
            }
        }
    }
}();

Edit:

Still not working, changed the callback to this like you said:

this.callback = "callback";

The alert in the slideshowGo function simply doesn't fire:

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

Upvotes: 1

Views: 166

Answers (2)

chim
chim

Reputation: 8573

Isn't this the point where the fade effect has finished?

        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

Upvotes: 1

Sam Jones
Sam Jones

Reputation: 4618

If you wanted to use a jquery fadeout, it would just be the following for the fadeout:

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

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

Upvotes: 1

Related Questions