슬라이드 다운에 타이머를 설정하고 슬라이드 업 후 버튼이 변경됩니다.

Question

웹 사이트를 서핑 한 후 무엇을 넣어야합니까? 3 초 후 광고가 웹 페이지 상단에서 아래로 슬라이드하고 해당 div의 버튼 이름이로 변경됩니다. '숨는 장소'. 숨기기 버튼을 클릭하면 광고가 위로 슬라이드되고 버튼 이름이 다시 '표시'됩니다.

아래로 밀어 내고 위로 이동하는 동안 작동하며 HIDE 및 SHOW 버튼도 성공적으로 변경됩니다. 그러나 버튼이 'SHOW'로 다시 변경된 후에. 나는 'SHOW'버튼을 클릭했지만 '숨기기'로 다시 바뀌지 않을 것입니다. 그리고 나는 또한 아래로 미끄러지는 타이머를 설정하지 않았다. 나는 다른 질문에 대한 답을 찾을 수 없기 때문에 무엇을 놓을 지 모르기 때문에.

이 자바 스크립트와 jQuery를 내 스크립트는이 내가 보여

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

을 숨기려는 것입니다

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

이며,이 또한 내 CSS

#adsBox { display:none }; 

이며 내가 이런 식으로 시도했다. 그리고 여전히 작동하지 않습니다.

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

필자의 코딩이 지저분하다는 것을 알고있다. 저를 올바른 방향으로 인도하십시오. 그리고 나쁜 영어로 미안해. 감사.

Answer 1

버튼 레이블은 짧게 말하지 않았기 때문에 뒤로 바뀌지 않습니다. slideToggle()으로 전화하면 요소의 가시성이 앞뒤로 바뀌지 만 .text("SHOW")으로 전화하면 한 번에 한 가지만 ... 텍스트가 항상 '표시'로 설정됩니다. '텍스트가 SHOW 경우, 그것을 숨기기로 설정 -

말을하는 것입니다

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

가 :

는 다음과 같이하십시오. 그렇지 않다면 SHOW '로 설정하십시오. 당신의 타이머

는 setTimeout()을 사용

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