Форум

mxs89 · #1 (**permalink**) 04.06.2013, 10:28

Необходимо выводить блоки с задержкой

<div>текст-1</div>
<div>текст-2</div>

скрипт:

$('div').each(function(){

setTimeout($(this).show('fast'), 2000);

});

блоки появляются одновременно, даже если у каждого блока свое значение задержки (передаю через аттрибут). как реализовать задержку?

Deff · #2 (**permalink**) 04.06.2013, 11:48

Может так ?

function divShow(sel,n){
   if(n>=sel.length) return;
   setTimeout(function (){sel.eq(n).show('fast');divShow(sel,n+1)}, 2000);
}
divShow($('div'),0)

ksa · #3 (**permalink**) 04.06.2013, 11:57

Сообщение от mxs89

Необходимо выводить блоки с задержкой

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#test div {
	display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	var o=$('#test > div').eq(0);
	setTimeout(function (){
		show(o);
	},1000);
});
function show(Obj) {
	Obj.show();
	var o=Obj.next('div')
	if (o.length==0) return;
	setTimeout(function (){
		show(o);
	},1000);
};
</script>
</head>
<body>
<div id='test'>
	<div>текст-1</div>
	<div>текст-2</div>
	<div>текст-3</div>
	<div>текст-4</div>
</div>
</body>
</html>

рони · #4 (**permalink**) 04.06.2013, 14:22

mxs89,
Вариант...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#test div {
	display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
$('#test > div').each(function(i,el){
 $(el).delay((i+1)*2000).show('fast')
 });
});
</script>
</head>
<body>
<div id='test'>
	<div>текст-1</div>
	<div>текст-2</div>
	<div>текст-3</div>
	<div>текст-4</div>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript