將計時器設置為向下滑動，然后在向上滑動后更改按鈕

Question

瀏覽網站后，我該怎么辦？三秒鍾后，廣告將從網頁頂部向下滑動，該div上的按鈕名稱將變為“隱藏”。 然后，我們單擊“隱藏”按鈕，廣告將向上滑動，並且按鈕名稱再次變回“顯示”。

它可以上下滑動，並且“隱藏”和“顯示”按鈕也可以成功更改。 但是在按鈕再次變回“ SHOW”之后。 我單擊了“顯示”按鈕，但它不會變回“隱藏”。 而且我也沒有設置計時器向下滑動。 因為我找不到其他問題的答案，所以我不知道該說些什么。

這是我的JavaScript和jQuery腳本

$(document).ready(function () {
    $(".showAds").click(function () {
    $("#ads").slideToggle("slow");
    $('a#showLink').text('SHOW');
     });
});

這就是我要顯示和隱藏的

<div id="top">
    <div id="adsBox">
         <div id="ads"> <img src="assets/images/ads.jpg" alt="ads"> </div>
         <p> <a href="#" id="showLink" class="showAds">HIDE</a> </p>
    </div>
</div>

這是我的CSS

#adsBox { display:none };

我也嘗試過這樣的事情。 而且它仍然無法正常工作。

$(".showAds").click(function () {
    $("#ads").slideUp("slow");
    $('a#showLink').text('SHOW');
    $("#ads").slideDown("slow");
    $('a#showLink').text('HIDE');
});

我知道我的編碼很亂。 請引導我朝正確的方向。 對不起，我的英語不好。 謝謝。

Answer 1

按鈕標簽不會變回原狀，因為總之，您還沒有告訴過它。 您對slideToggle()調用slideToggle()切換了元素的可見性，但是您對.text("SHOW")調用僅做一件事...每次都將文本設置為'SHOW'。

嘗試這樣的事情：

$(".showAds").click(function () {
   $("#ads").slideToggle("slow");
   $('a#showLink').text(text == "SHOW" ? "HIDE" : "SHOW");
});

就是說-'如果文本為SHOW，則將其設置為HIDE。 如果不是，請將其設置為SHOW'。

對於您的計時器，請使用setTimeout() ：

setTimeout(function(){ $("ads").slideToggle("slow");}, 3000);