如何淡入/淡出文本+圖像

Question

我正在嘗試在我的網站內創建一個評論區域，以顯示我收集的一些客戶評論 + 他們的徽標。 現在，我已經設法每 5 秒更改一次（評論+徽標）:)！ 有用！

我現在想要實現的是淡出/淡出和淡出/在下一個評論+徽標中。 我不確定我應該在哪里搜索它，有人可以將我指向正確的帖子或文章嗎？ 謝謝

 var review = new Array(); review.push("Text1"); review.push("Text2"); review.push("Text3"); var clientlogo = new Array(); clientlogo.push(""); clientlogo.push(""); clientlogo.push(""); var point = 0; function changeText(){ $('.review').html(review[point]); $('.client-logo').attr('src',clientlogo[point]); if(point < ( review.length - 1 ) ){ point++; }else{ point = 0; } } setInterval(changeText, 5000); /*Call it here*/ changeText();

 body { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #4d4d4d; margin: 0 auto; }.review-container { width: 400px; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #4d4d4d; color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="review-container"> <div class="review"></div> <img class="client-logo" src=""/> </div>

Answer 1

jQuery 包括褪色的東西： https://api.jquery.com/category/effects/fading/

它需要一個回調 function 在 animation 完成后調用。 您可以在上一個評論完成淡出后使用它來淡入下一個評論。

previousReview.fadeOut(delay, function() { nextReview.fadeIn(delay) });

然后你仍然可以使用你的setInterval調用來知道多久運行一次。