Как реализовать задержку
Необходимо выводить блоки с задержкой
<div>текст-1</div> <div>текст-2</div> скрипт: $('div').each(function(){ setTimeout($(this).show('fast'), 2000); }); блоки появляются одновременно, даже если у каждого блока свое значение задержки (передаю через аттрибут). как реализовать задержку? |
Может так ?
function divShow(sel,n){
if(n>=sel.length) return;
setTimeout(function (){sel.eq(n).show('fast');divShow(sel,n+1)}, 2000);
}
divShow($('div'),0)
|
Цитата:
<!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>
|
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>
|
| Часовой пояс GMT +3, время: 15:31. |