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:


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


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 */
            obj.style.opacity = "1";
            obj.style.filter = "alpha(opacity=100)";    

            t = setTimeout(doFade,50);





document.getElementById("sec_1_svar_id").innerHTML = sec_1;

Is this what you were looking for?

@klemme did this solve your issue?

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.

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