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

Question

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

我的目标是在主页上先让“你好”出现 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函数一起使用的，这导致了语法错误。

此外，也没有必要为嵌入式span您的内部元素h1在这种情况下，元素，因为整个案文是在span与span在唯一h1。

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

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>