Изменение ширины блока каждый n-секунд

[AntoXa987]

Привет!

Все копаюсь я в интернете и не могу найти ничего подходящего. Может кто нибудь поможет решить мою проблему. В js только вникаю, но пока не очень успешно...

И так, вот задача:

Есть блок div id="1" и нужно сделать так, что бы каждые пара секунд у него из width вычиталось по 5 пикселей. Без нажатий - сразу после запуска страницы. Это должно происходить онлайн.

Теоретически я знаю, что нужно получить элемент по ID, затем видимо убрать последние 2 символа (px) из переменной, вычесть из получившегося числа 5, затем к результату дописать px и поместить назад в переменную, подождать пару сек и запустить цикл заново, пока width не кончится. Вот только что-то ничего у меня не получилось.

Всем заранее огромное спасибо!

[Pavel M.]

можно начать читать http://javascript.ru/blog/Andrej-Par...cii-JavaScript

[AntoXa987]

Спасибо конечно, я видео уроки Попова себе скачал, начну с них, а потом уже буду справочники читать. Но в сейчас просил помочь по скрипту, а не по литературе...

[AntoXa987]

Прошу прощения, там действительно полезная инфа! Думал просто ссылка на справочник =) Еще раз сорри!

[nerv_]

AntoXa987, простой пример можно посмотреть здесь.

[AntoXa987]

Блин, совсем не варит голова...
Пытаюсь сделать так:

var x = str.substring(0, "document.getElementById("1").style.width.length" - 2); //это что бы удалить px из строки
var y = intal(x) //пытаюсь преобразовать строку в число
for(i=0;i<100;i++) {
x -= 10;
document.getElementById("1").style.width = x+'px';
//ну и тут я еще не разобрался как задержку в пару сек сделать
}

[melky]

var x = str.substring(0, "document.getElementById("1").style.width.length" - 
2); //это что бы удалить px из строки
var y = intal(x) //пытаюсь преобразовать строку в число

?!

alert( *!*parseInt("53px")*/!* );

я бы так сделал.

var el = document.getElementById("1"), // id не может начинаться с числа. это просто пример
     current = el.style.width, // текущее значение ширины.
     duration = 600; // продолжительность в мсек
     started, // время начала анимации
     progr, // её прогресс.
     id; // ID интервала, чтобы его завершить.

if(!current){     // если ширина не указана в атрибуте style
     // кроссбраузерно получаем текущую ширину
     if('\v' == 'v'){   //короткое определение старого IE < 9
          current = el.currentStyle;
     } else {
          current = getComputedStyle(el, null);
     }
     current = current.width;   
}

// теперь преобразуем её в число.
current = parseInt(currentStyle);

started = Date.now(); // отмечаем начало анимации

// ну и анимируем.
id = setInterval(function(){
     progr = (Date.now() - started) / duration;
     
     if(progr > 1) { // анимация закончена
          clearTimeout(id);
          el.style.display = 'none';
     } else { // ещё продолжается
          el.style.width = current * ( 1 - progr ) + 'px';
     }
}, 15);

[nerv_]

AntoXa987, обратите внимание на пост от melky. В часности на то, что подчеркнуто. Это самый оптимальный вариант. В ссылке, которую приводил я, данный момент реализован через regexp потому, что я в них практикуюсь, и те регулярный выражения были одни из первых