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';
//ну и тут я еще не разобрался как задержку в пару сек сделать
}

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);