@BedOmar
Веб-разработчик

Как сделать анимацию блока через N секунд?

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

</style>
<div class='close'>

<div id='closediv'>
<?
$result10 = mysqli_query($db, "SELECT * FROM users WHERE login='$login' AND password='$password' AND activation='1'"); 
$myrow10 = mysqli_fetch_array($result10); 

if (empty($_SESSION['login']) and empty($_SESSION['password'])) {
print <<<HERE
	<form action='testreg' method='POST'>
		<table id='closetable'>
			<tr>
				<td>
					<input name='login' type='text' maxlength='15' placeholder='Ваш логін' class='auth_input'>
				</td>
			<tr>
				<td>
					<input name='password' type='password' maxlength='15' placeholder='Ваш пароль' class='auth_input'>
				</td>
			</tr>
			<tr>
				<td><input type='submit' name='submit' value='Ввійти' class='auth_button'></td>
			</tr>
			<tr>
				<td><a href='send_pass'>Забули пароль?</a> 
				<br>
				<a href='reg'>Зареєструватися</a> </td>
			</tr>		
		</table>
	</form>
HERE;
}
else{
if (isset($_SESSION['login']) and isset($_SESSION['password'])) {
print <<<HERE
<table id='closetable'>
<tr>
	<td><a href='page?id=$_SESSION[id]'>
	<img src='../img/user.png' align='middle'>
	Ваш профіль</a></td>
</tr>
<tr>
	<td><a href='messages'>
	<img src='../img/message.png' align='middle' class='message'>
	Повідомлення</a></td>
</tr>
<tr>
	<td><a href='all_users'>
	<img src='../img/all_users.png' align='middle'>
	Список користувачів</a></td>
</tr>
HERE;
$login = $_SESSION['login'];
$password = $_SESSION['password'];
$result17 = mysqli_query($db, "SELECT * FROM users WHERE login='$login' and password='$password'");
$myrow17 = mysqli_fetch_array($result17);
if($myrow17['privilege'] == 1){
print <<<HERE
	<tr>
		<td>
			<a id="opena">
				<img src='../img/all_users.png' align='middle'>
				Додати новину
			</a>
			<div id="opendiv">
				<table>
				<tr>
					<td>
						<a href='news/index/' id="menu_categ">
							Головна
						</a>
						<a href='news/history/' id="menu_categ">
							Історія
						</a>
						<a href='news/olympiad/' id="menu_categ">
							Олімпіада
						</a>
						<a href='news/art/' id="menu_categ">
							Творчість
						</a>
						<a href='news/poll/' id="menu_categ">
							Опитування
						</a>
						<a href='news/contest/' id="menu_categ">
							Конкурси
						</a>
					</td>				
				</tr>
				</table>
			</div>
		</td>
	</tr>
HERE;
}	
print <<<HERE
<tr>
	<td><a href='settings'>
	<img src='../img/settings.png' align='middle'>
	Налаштування</a></td>
</tr>	
<tr>
	<td><a href='exit'>
	<img src='../img/logout.png' align='middle'>
	Вийти</a></td>
</tr>
</table>	
HERE;
}
}
?>	

</div>
<a id='closea' onclick="close(this)" class="closea">
  <img id='closeimg' src="../img/up.png" style="width:30px">
</a>
<script type="text/javascript">
$('#opena').on('click', function(){ $('#opendiv').slideToggle(); });

$(function() {
  $(document).ready(function(){
    $("#closea").click();
    $("#closediv").fadeIn(); 
  });
});

$(function() {
  $("#closea").click(function() {
    if ($(this).hasClass("closea")) {
      $(this).removeClass("closea");
      $("#closeimg").attr("src", "../img/up.png");
    } else {
      $(this).addClass("closea");
      $("#closeimg").attr("src", "../img/down.png");
    }
    $("#closediv").slideToggle("slow");
  });
});
</script>
  • Вопрос задан
  • 155 просмотров
Пригласить эксперта
Ответы на вопрос 2
0lorin
@0lorin
программист
bubandos
@bubandos
bash'у, javascript'ую, php'лю, css'аю, html'каю
Прописываем блоку 2 css-класса:
1) чтобы блок спрятался с задержкой n секунд.
2) с бесконечной анимацией чтобы "слегка вылезал" с задержкой n+m секунд.

или можно setInterval или setTimeout
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы