1

function close(input) {

}
$(function() {
  $("#closea").click(function() {
    if ($(this).hasClass("closea")) {
      $(this).removeClass("closea");
      $("#closeimg").attr("src", "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
    } else {
      $(this).addClass("closea");
      $("#closeimg").attr("src", "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png");
    }
    $("#closediv").slideToggle("slow");
  });
});
.close{
	text-align: ;
	position: fixed;
	bottom: 0px;
	right: 0px;
	width: 40%;
	background: rgb(80, 80, 80);
} 

.close:hover{
	
}

#closediv{
	
}

#closediv:hover{
	
}

#closea{
	background: rgba(80, 80, 80, 0.7) !important;
	cursor: pointer;
	text-align: center;
	display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='close'>

<div>
<a id='closea' onclick="close(this)" class="closea">
  <img id='closeimg' src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" style="width:30px">
</a>
</div>
<div id='closediv'>
content content content content content content content content content content content content content content 
</div>
</div>

как сделать блок изначально был открытим и при загрузки страницы закрился. и каждые 15 секунд блок приоткрывался немного но не открывался. как будто напоминая о себе

1 ответ 1

0

setTimeout - исполняется один раз

setInterval - исполняется до тех пор, пока сами не остановите исполнение

вам стоит ознакомиться с https://learn.javascript.ru/settimeout-setinterval

function close(input) {

}
$(function() {
  $("#closea").click(function() {
    if ($(this).hasClass("closea")) {
      $(this).removeClass("closea");
      $("#closeimg").attr("src", "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
    } else {
      $(this).addClass("closea");
      $("#closeimg").attr("src", "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png");
    }
    $("#closediv").slideToggle("slow");
  });
  
  setTimeout(function(){
    $("#closediv").slideToggle("slow").addClass("smallHeight");
    
    setInterval(lookAtMe, 5000);
    
  }, 5000);  
  
  function lookAtMe() {
    $("#closediv").slideToggle("slow").delay(1000).slideToggle("slow");
  }
});
.close{
	text-align: ;
	position: fixed;
	bottom: 0px;
	right: 0px;
	width: 40%;    
	background: rgb(80, 80, 80);
} 

.smallHeight { height: 30px; }

.close:hover{
	
}

#closediv{
	
}

#closediv:hover{
	
}

#closea{
	background: rgba(80, 80, 80, 0.7) !important;
	cursor: pointer;
	text-align: center;
	display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='close'>

<div>
<a id='closea' onclick="close(this)" class="closea">
  <img id='closeimg' src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" style="width:30px">
</a>
</div>
<div id='closediv'>
content content content content content content content content content content content content content content 
</div>
</div>

3
  • У стрелки перманентное display: none; и при просмотре нужно обнулять интервал.
    – user207618
    Commented 13 окт. 2016 в 20:55
  • Это ж не продакшен, оставим товарищу возможность покопаться дальше самому ?!
    – Mike
    Commented 13 окт. 2016 в 20:59
  • Здравая мысль, товарищ :) Правда если это учебное демо, то нужно сделать на другую тему и, обязательно, с объяснениями.
    – user207618
    Commented 13 окт. 2016 в 21:00

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.