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>