将计时器设置为向下滑动，然后在向上滑动后更改按钮

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);