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

图像视觉:(如果有帮助）

enter image description here

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添加到您的容器中......这不是您想要的吗？< / p>

希望这有帮助。

jquery fadeIn和淡出动态内容

1 个答案: