Слайдинг

@BreatheInMyVoid · Регистрация: 05.03.2010

Author24 — интернет-сервис помощи студентам

Здравствуйте. Я недавно начал активно изучать JavaSrcipt. Пока не пользуюсь
различными фреймворками а стараюсь для опыта писать свои функции. Сейчас не могу
разобраться по какому принципу делают анимацию элементов. Допустим есть файл
sliding.js, содержащий функции которые позволяют элементу плавно разворачиваться.
В HTML коде есть конпка при нажатии на которую элемент должен плавно развернутья
сверху вниз.

HTML5

1	<input type = "button" value = "Slide" onclick = "slide('menu', 960)"/>

В файле sliding.js есть функция slide:

Javascript

function slide(id, height) {
    var element = document.getElementById(id);
    
    while(element.offsetHeight < height) {
        setTimeout(element.style.height = element.offsetHeight + 10, 500);
    }
}

Но при нажатии на кнопку, функция выполняеться только один раз, открывается
только 10px элемента и все. Немогли бы вы мне обьяснить почему. Так же если можно
дать ссылки на информацию и примеры по этой теме. Мне не хочется выносить setTimeout()
или setInterval() в HTML а все сделать в .js файле а выносить только одну функцию
принимающую необходимые параметры. Спасибо.

@cooperOk · 29.04.2010, 22:42

Выполняется один раз потому что setTimeout выполняет код только раз. Хотя в опере он выполняется полностью и без задержек(из за цикла).

Можно сделать таким способом

Javascript

function slide(id, height) {
    var element = document.getElementById(id);
 
    intervalId = setInterval(function(){
    if(element.offsetHeight < height)
        element.style.height = element.offsetHeight + 10+'px'; //Firefox воспринимает стиль height/width только с пикселями
    else
        clearInterval(intervalId); //Очистить интервал
    },
    500);
 
}

Вот ссылки на интересующий материал
setTimeout
setInterval

@uggway · 30.04.2010, 15:16

Или например так.

Javascript

function slide(id, height) {
    var element = document.getElementById(id);
        
    if(element.offsetHeight < height)     {
         element.style.height = element.offsetHeight + 10;
         setTimeout(function(){slide(id,height);}, 500);
}
    
}

	30.04.2010, 15:16