Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.07.2009, 10:52
Новичок на форуме
Отправить личное сообщение для fed0R Посмотреть профиль Найти все сообщения от fed0R
 
Регистрация: 01.07.2009
Сообщений: 7

Плавное изменение ширины ячейки в таблице
Уважаемые форумчане, не подскажет ли кто, как решить задачу?

В двух словах суть проблемы: в html-документе есть таблица в которой есть ячейки шириной 100 пикселов каждая. Нужно, чтобы при клике над ячейкой её ширина увеличивалась до 200 пикселов, но не мгновенно (это я сделать смог), а, скажем, за 2 секунды.

В таком скрипте:

document.getElementById('td1').onclick = function () {
for(var i = 100; i < 200; i++) {
this.style.width = i + 'px';
alert(this.style.width);
}


ширина увеличивается на один пиксел каждый раз после вывода alert. Если же убрать alert, то ширина изменится мгновенно. Я так понимаю, что нужно вставить setInterval, но куда - ума не приложу. Как бы ни пытался - ничего не выходит...
Ответить с цитированием
  #2 (permalink)  
Старый 10.07.2009, 14:08
-
Отправить личное сообщение для twolf Посмотреть профиль Найти все сообщения от twolf
 
Регистрация: 16.07.2008
Сообщений: 207

http://javascript.ru/blog/Andrej-Par...cii-JavaScript
Ответить с цитированием
  #3 (permalink)  
Старый 22.07.2009, 13:05
Новичок на форуме
Отправить личное сообщение для fed0R Посмотреть профиль Найти все сообщения от fed0R
 
Регистрация: 01.07.2009
Сообщений: 7

Снова я со своим вопросом.

Если написать такой код:

var interval = null;

function more() {
document.getElementById('td1').style.width = (parseInt(document.getElementById('td1').style.wid th) + 1) + 'px';
if(parseInt(document.getElementById('td1').style.w idth) > 300) {
clearInterval(interval);
}
}

interval = setInterval(more, 10);


то ячейка таблицы с id = 'td1' автоматически плавно увеличивает ширину до 300 пикселей. В принципе, как раз то, что мне нужно. Однако хотелось бы, чтобы действие происходило не сразу, а по щелчку мыши, например. Тут возникает проблема - если перед function more() { дописать document.getElementById('td1').onclick = , то ничего не работает... Подскажите пожалуйста, что я делаю не так?
Ответить с цитированием
  #4 (permalink)  
Старый 22.07.2009, 13:24
Интересующийся
Отправить личное сообщение для mouse_web Посмотреть профиль Найти все сообщения от mouse_web
 
Регистрация: 21.07.2009
Сообщений: 10

<script type="text/javascript">
var interval = null;

function more() {
document.getElementById('td1').style.width = (parseInt(document.getElementById('td1').style.wid th) + 1) + 'px';
if(parseInt(document.getElementById('td1').style.w idth) > 300) {
clearInterval(interval);
}
}

function ButtonClick() {
interval = setInterval(more, 10);
}
</script>

<table border=1><tr><td style="width:100px" id="td1">текст</td></tr></table><br>

<input type="button" value="Нажми меня!" onclick="ButtonClick()">
Ответить с цитированием
  #5 (permalink)  
Старый 29.07.2009, 11:50
Новичок на форуме
Отправить личное сообщение для fed0R Посмотреть профиль Найти все сообщения от fed0R
 
Регистрация: 01.07.2009
Сообщений: 7

mouse web, спасибо за помощь!)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение цвета ячейки (динамическая таблица) не по событию ImSWORDMASTER Элементы интерфейса 3 12.03.2009 20:21
Плавное изменение alpha Vladislav0 Элементы интерфейса 16 22.11.2008 11:33
Изменение ширины полосы прокрутки Devoto Общие вопросы Javascript 3 07.07.2008 16:01