javascript - jquery 淡入和淡出动态内容

Question

我有一个函数，可以将数据加载到 div 中，并在设定的时间后淡出该数据。我无法找到一种方法来替换数据然后再次将其淡出。

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

我通过切换完美运行的数据来完成此工作:

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

但是将它们动画化对于用户来说看起来会更好。有没有办法在内容切换后以动画方式重新显示内容？事情很少。每次要切换的数据都存储在数组中并进行替换。并且数据是从ajax请求中获取的。

完整源代码:

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

返回数据:(目前正在测试)

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>'))));

图像视觉:(如果有帮助的话)

Answer 1

有两件事:

第一:

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

您将淡出的内容替换为新内容，该内容尚未淡出，因此 fadeIn 不会执行任何操作。你应该这样做:

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

然后:

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

在这里，您实际上在 fadeOut 回调之前执行 storedAds[a] = tempStore; ，因此这一行 $('#adCam_'+a).html(storedAds[a]); 可能只是将 tempStore 添加到您的容器中...这不是您想要的，对吧？

希望这有帮助。