jquery fadeIn and fade out dynamic content

Question

I have a function that loads data into divs and after a set time fades that data out. I cant figure a way to replace the data then fade it back again.

setInterval(function(){
    for(var a = 0; a < amount; a++){
        var tempStore = $('#adCam_'+a).html();
        $('#adCam_'+a).children().fadeOut(500,function(){
            $('#adCam_'+a).html(storedAds[a]);
            $('#adCam_'+a).children().fadeIn(500);
        });
        storedAds[a] = tempStore;
    }
},2000);

I had this working by just switching the data which worked perfectly:

setInterval(function(){
for(var a = 0; a < amount; a++){
    var tempStore = $('#adCam_'+a).html();
    $('#adCam_'+a).html(storedAds[a]);
    storedAds[a] = tempStore;
}
},60000);

But animating them out would look nicer for the user. Is there a way to animate the content back in after it has been switched? There is few things. The data to be switched is stored and replaced in array each time. And the data is brought from an ajax request.

Full Source Code:

var adAlign = 'left';
var storedAds = Array();
var currentAd = 0;
function setAds(user_data,ad_id){
    var dh = window.innerHeight - 130;
    var adH = 170;
    var amount = dh/adH;
    var space = dh - adH;
    var amount = String(dh/adH);
    var dec = amount.split(".");
    amount = parseInt(dec[0]);
    var margin = parseInt(space)/parseInt(amount);
    $.ajax({
        url:'global.func/pc_ad_campaign.php?'+ad_id+'=true',
        type:'POST',
        dataType:"JSON",
        data:{
            amount:amount,
            margin:margin,
            gender:user_data['gender'],
            age:user_data['age'],
            sport:user_data['sport'],
            interests:user_data['interests']
            },
        success:function(json){
            if(json.err > 0){
            }else{
                var m = margin / 4;
                $('.ad').css('margin-top',m+'px');
                for(var x = 0; x < amount; x++){
                    $('#ads').html($('#ads').html() + '<div id="adCam_'+x+'" class="ad ad_'+adAlign+'" style="margin-top:'+m+'px">'+json.data[x]+'</div>');
                    storedAds.push(json.data[parseInt(x + amount)]);
                    if(adAlign === 'left'){
                        adAlign = 'right';
                    }else{
                        adAlign = 'left';
                    }
                }
                setInterval(function(){
                    for(var a = 0; a < amount; a++){
                        var tempStore = $('#adCam_'+a).html();
                        $('#adCam_'+a).html(storedAds[a]);
                        storedAds[a] = tempStore;
                    }
                },60000);
            }
        }
    });
}

Data returned: (just testing at the moment)

die(json_encode(array('err' => 0, 'data' => array('<div>ad 1</div>','<div>ad 2</div>','<div>ad 3</div>','<div>ad 4</div>', '<div>ad 5</div>', '<div>ad 6</div>'))));

Image visual: (in case it helps)

enter image description here

I'm not clear on what you are trying to achieve. I would suggest that you attempt to reduce your code down to the smallest possible set of functions that would replicate your concept. — Aboba, Apr 08 '14 at 22:44
possible duplicate of [How to fade out div slowly, update content, and then fade in div slowly, using jQuery?](http://stackoverflow.com/questions/5879899/how-to-fade-out-div-slowly-update-content-and-then-fade-in-div-slowly-using-j) — Stphane, Apr 08 '14 at 22:57

score 0 · Answer 1 · answered Apr 29 '15 at 10:01

Two things :

First :

$('#adCam_'+a).html(storedAds[a]);
$('#adCam_'+a).children().fadeIn(500);

You replace the faded out content with a new content, this one has not been faded out, so fadeIn will do nothing. You should do something like:

$e = $(storedAds[a]).css({'display':'none', 'opacity', 0});
$('#adCam_'+a).children().remove();
$('#adCam_'+a).append($e);
$('#adCam_'+a).children().fadeIn(500);

Then :

var tempStore = $('#adCam_'+a).html();
$('#adCam_'+a).children().fadeOut(500,function(){
     $('#adCam_'+a).html(storedAds[a]);
     ...
});
storedAds[a] = tempStore;

Here you actually do storedAds[a] = tempStore; before the fadeOut callback so this line $('#adCam_'+a).html(storedAds[a]); may just add tempStore into your container ... that's not what you want right ?

Hope this helps.

jquery fadeIn and fade out dynamic content

1 Answers1