Fade in AJAX respone, with native JS

[klemme]

I have an ajax call, and am wondering how I can fade in the response. The short code is this, I believe that is what you need to be able to tell what extra code should be added to achieve the fade in effect.

PS: It is not made in Jquery, so I need to keep it native js, if possible..?

This is where I write out the answer from the ajax call:

setTimeout(function(){document.getElementById(sec_1_svar_id).innerHTML = sec_1;}, 1300);

It works fine with the timeout, and then I thought/hoped I could add this bit somehow:

'fade()',8000

Ive tried a couple of different ways, but I either destroy the answer, or nothing happens... :-)

Klemme

[theHop]

Hi. Is the "fade()" function already written?

set your css for sec_1_svar_id so that the opacity is at 0. add the content with AJAX then call fade.

 function fadeUp(obj){
    if(typeof(obj) == "string"){
        obj = document.getElementById(obj);

    }

    var t;

    var opacity_counter = 0;

    var doFade = function(){

        obj.style.opacity = (opacity_counter/100);
        /* for IE */ obj.style.filter = "alpha(opacity=" + opacity_counter + ")";

        opacity_counter = opacity_counter + 10;           

        if(opacity_counter >= 100){
            /*normalise opacity */
            clearTimeout(t);
            obj.style.opacity = "1";
            obj.style.filter = "alpha(opacity=100)";    
            return;

        }else{
            t = setTimeout(doFade,50);

        }



    }

    doFade();


}

setTimeout(function(){
document.getElementById("sec_1_svar_id").innerHTML = sec_1;
fadeUp("sec_1_svar_id");
},300);

Is this what you were looking for?

[theHop]

@klemme did this solve your issue?

[ArchAugust]

Worked for me, thanks! Been searching for a non-jQuery way to do this.

I'm sure it worked for him too just didn't bother replying.

[theHop]

@ArchAugust Glad it helped someone! you could give me an up vote if you like :)