Последовательное выполнение кода
 

Здравствуйте, вот какая проблема, очень прошу помочь:

Есть задача - плавно увеличить изображение при клике, при достижении конечного размера (не раньше!!) должна появиться кнопка "Закрыть".
Вот как реализовано:

function ShowImg(obj,hBlock) { 
    if (obj.offsetHeight < hBlock) { 
        obj.style.height = (obj.offsetHeight + 50) + 'px';
        setTimeout (function(){ShowImg(obj,hBlock)},30); 
    }
}
 
function showLargePicture(h)
{
    var div = document.getElementById('img_container');
    var img = document.getElementById('resImage');
 
    // Плавное увеличение изображения
    var i = ShowImg(img,div,h);
    // Появление кнопки "Закрыть"
    var x = document.getElementById('img_close');
    x.style.display = 'block';
}

Вобщем, кнопка "Закрыть" появляется сразу - параллельно с увеличением, не дожидаясь окончания процедуры..
Можно как-то заставить её "подождать" с появлением до того, как полностью закончится выполнение функции ShowImg(obj,hBlock) ??

Не проверял но должно сработать

function ShowImg(obj,hBlock) { 
    if (obj.offsetHeight < hBlock) { 
        obj.style.height = (obj.offsetHeight + 50) + 'px';
        setTimeout (function(){ShowImg(obj,hBlock)},30); 
    }
    else{
        // Появление кнопки "Закрыть"
        var x = document.getElementById('img_close');
        x.style.display = 'block';
    }
}
 
function showLargePicture(h)
{
    var div = document.getElementById('img_container');
    var img = document.getElementById('resImage');
 
    // Плавное увеличение изображения
    var i = ShowImg(img,div,h);
}

Спасибо! как просто все.. Работает как надо.
А вот еще проблема всплыла. Код тот же, слегка модифицированный, чтоб нагляднее было:

function ShowImg(img, height) { 
    if (img.offsetHeight < height) { 
       // постепенное увеличение высоты
        img.style.height = (img.offsetHeight + 50) + 'px';
        setTimeout (function(){ShowImg(img, height)},30); 
    }
    else{
        // Появление кнопки "Закрыть"
        var x = document.getElementById('img_close');
        x.style.display = 'block';
    }
}
 
function showLargePicture(url, height)
{
    var img = document.getElementById('Image');
    img.src = url;
    img.style.display = 'block';
 
    // Плавное увеличение изображения
    var i = ShowImg(img,height);
}

Проблема в следующем - при клике не успевает замениться картинка - увеличиваться начинает сначала предыдущий рисунок (как будто застревает в памяти) - img.src = url; - и уже в процессе увеличение (ближе к концу) заменяется скачком на новый. Учитывая, что рисунки разного размера - ужасно некрасиво получается такой скачок.

(* закрытие картинки делаю по клику img.style.display = 'none' )

Есть ли какой-нибудь выход?? Надо, чтоб при закрытии типа память ичищалась от старой картинки..

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

function showLargePicture(url, height) {
  var img = document.getElementById('Image');              
  var tempImg = document.createElement('img'); //создаём новую картинку
  img.parentNode.insertBefore(tempImg, img); //вставляем новую перед старой
  tempImg.parentNode.removeChild(img); //удаляем полностью тег со старой картинкой
  tempImg.id = 'Image';
  tempImg.src = url;
  tempImg.style.display = 'block';

  // Плавное увеличение изображения
  var i = ShowImg(tempImg, height);
 }