Исчезающие меню, как сделать стандартными методами?
Хочу сделать вот что: Выпадающие меню - так, что бы каждая последующая строка появлялась через определенный интервал, но со стандартными методами setInterval, setTimeout не чего не вышло (возможно я не правильно подошел к решению задачи). Попробовал сделать так: бесконечный цикл обрывается через секунду работы, и по окончанию исчезает один элемент. Это работает только с одним элементом. Если сделать с большим числом элементов - компьютер зависает и исчезают сразу все строки. Вопрос: Возможно ли решить эту задачу стандартными методами (бес подключения библиотек), и главное как?
|
Конечно можно. HTML-код со стилями в студию. И ваш js-код, который вы сумели написать. Кстати вопрос - чем не устраивает jquery или иные библиотеки для анимации?
|
Устаревает. Но я хотел бы узнать - способен ли это сделать сам JS без библиотек.
Мой код: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title></title> </head> <body onload="style_function()"> <table id="table00" border="3"> <tr> <td onclick="height_function()"></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> <script type="text/javascript"> function style_function(){ sell = document.getElementById('table00').getElementsByTa gName("td"); for(i=0; i<sell.length; i++){ sell[i].style.width = '200px'; sell[i].style.height = '50px'; } } function height_function(){ sell = document.getElementById('table00').getElementsByTa gName("td"); var i = 0; while(i<5){ var date00 = new Date(); var seconds = date00.getSeconds(); while(true){ var date01 = new Date(); if(seconds !== date01.getSeconds())break; } sell[i].style.display = "none"; i++; } } </script> </body> </html> |
Код отформатируйте.
Цитата:
|
Ну что же, должно быть вы праву. Не стоит выделываться :)
|
на, заебал http://habrahabr.ru/post/111658/
|
Попытался решить вашу задачу
<style type="text/css">
#table00 td {
width: 200px;
height: 50px;
}
</style>
<script type="text/javascript">
function height_function() {
var sell = document.getElementById('table00').getElementsByTagName("td");
var i = sell.length;
setTimeout(function run() { sell[i].style.display = "none";
var t = setTimeout(run, 1000);
i--;
if(i == 0)
clearTimeout(t); }, 1000);
}
</script>
</head>
<body>
<table id="table00" border="3">
<tr>
<td onclick="height_function()"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
Но возникает проблема, внутри setTimeout не видны элементы sell. Если кто знает в чем проблема, отпишитесь пожалуйста. |
Цитата:
setTimeout(function () {
var run=function () { sell[i].style.display = "none";
i--; if(i == 0) {clearTimeout(t); return;}
var t = setTimeout(run, 1000);
}
}, 1000);
Элемента с i=sell.length; - Нет |
Цитата:
var i = sell.length -1 ; var t = setTimeout(run, 1000); i--; if(i == 0) clearTimeout(t); Что? Сначала ставим таймер, потом начинаем думать, и если таймер не нужен - стираем? Может сразу начать думать (делать проверку) и не ставить таймер когда не надо? И sell - тело продавать, а ячейки - это cells :) |
Ксать чот криво вообще построено, вроде так интересней:
<script type="text/javascript">
function height_function() {
var sell = document.getElementById('table00').getElementsByTagName("td");
var i = sell.length;
function run () {
var tim0 = setTimeout(function () {
i--; if(i == 0) {clearTimeout(tim0); return;}
sell[i].style.display = "none";
}, 1000);
run ();
}
}
</script>
|
| Часовой пояс GMT +3, время: 07:50. |