jQuery淡入/淡出文本，然后淡入新文本

Question

这是我第一次使用jQuery，我正在上在线课程，但从未在网站上使用过。

我的目标是在首页上先显示“ Hello there” 2秒钟，然后淡出并淡入“您的数字合作伙伴”并永久保留。

我一直在这里讨论有关相关难题的一些想法，并且越来越接近。 但是我的结构似乎是错误的，因为：1）两者同时出现，然后“你好在那里”开始消失，然后“你的伴侣被撞坏”-我希望“你好那里”迅速出现然后消失2）我希望“您的数字合作伙伴”永远不会消失

  jQuery(document).ready(function(){ $(".hellothere").fadeOut(4500,function(){ $(".partner").fadeIn(10000, function(){ $(".partner").fadeOut(4500); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 class="hellothere"><span class="font-168856 font-444086" style="font-size: 65px; text-transform: uppercase;">Hello there.</span></h1> <h1 class="partner"><span class="font-168856 font-444086" style="font-size: 65px; text-transform: uppercase;">Your partner in digital.</span></h1> 

当我删除此：

function(){
                $(".partner").fadeOut(4500);

它破坏了整个事情（试图使其停止褪色）。

这里有什么提示吗？ 非常感谢。

Answer 1

默认情况下，第二部分文本必须隐藏。 这可以通过CSS类来完成。

然后，一旦淡入.partner文本，就不要淡入淡出。 因此，应消除最内在的影响。 您这样做的方向正确，但是似乎您忘记删除了与fadeOut函数一起使用的} ，这会导致语法错误。

另外，在这种情况下，无需在h1元素中嵌入嵌入式span元素，因为整个文本都在span ，而span是h1唯一的东西。

最后，当类允许样式的简单得多的复制并在HTML中创建更少的混乱时，（FYI）不使用内联样式。

 jQuery(document).ready(function(){ $(".hellothere").fadeOut(2000,function(){ $(".partner").fadeIn(10000); }); }); 

 .partner { display:none; } .fontStuff { font-size: 65px; text-transform: uppercase; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 class="hellothere font-168856 font-444086 fontStuff">Hello there.</h1> <h1 class="partner font-168856 font-444086 fontStuff">Your partner in digital.</h1> 

Answer 2

我稍微简化了代码，以便只有1个标头标记，并且内部html淡出后会替换，然后淡入。

 jQuery(document).ready(function() { $(".welcomeHeader").fadeOut(4500, function() { $(".welcomeHeader span").text("Your partner in digital."); $(".welcomeHeader").fadeIn(4500); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 class="welcomeHeader"> <span class="font-168856 font-444086" style="font-size: 65px; text-transform: uppercase;">Hello there.</span> </h1>