为什么我的setTimeout函数fadeOut，用jQuery的replaceWith（）不工作延迟替换和淡入文本？

Question

替换发生的褪色不...这是我的代码：

$(document).ready(function() { 
var delay = 3000; //3 seconds 

setTimeout(function(){ 
    $('.header p').fadeOut(300, function(){ 
    $('.header p').replaceWith("<p>A LIFESTYLE FOR EVERYONE</p>"); 
    }); 
    $('.header p').fadeIn(300); 
}, delay); 
console.log("replaced"); 
}); 

Answer 1

更换元素是有问题的，当你不隐藏新的，改变它的内容，而不是

你可以避免同一元件的多个DOM搜索由第一动画

setTimeout(function(){ 
    $('.header p').fadeOut(300, function(){ 
      $(this).text("A LIFESTYLE FOR EVERYONE").fadeIn(300);   
    }); 
}, delay); 

的回调内部链接的东西通过仅更换它使参考元素中的内容，并允许链

Answer 2

尝试使用text代替replaceWith，并把淡入回调中：

$(document).ready(function() { 
var delay = 3000; //3 seconds 

setTimeout(function(){ 
    $('.header p').fadeOut(300, function(){ 
    $('.header p').text("A LIFESTYLE FOR EVERYONE").fadeIn(300); 
    }); 

}, delay); 
console.log("replaced"); 
}); 

如果你这样做replaceWith，要创建未淡出新页。另外，您想在之后将其淡入，但它会淡出（而不是同时）。