Пытается анимировать высоту divs с помощью JavaScript

Question

Я пытаюсь оживить высоту divs и в то же время установить нижнее свойство. Анимация работает, но она не остается в нижней части «родительского» div.

Вот код для анимации:

function mini(elem) { 
     var val = 200; 
     var elm = document.getElementById(elem.id); 

     function frame() { 
      val--; 

      elm.setAttribute("style", "height:" + val + "px;bottom:0px;"); 

      if (val == 80) { 
       clearInterval(id); 
      } 
     } 

     var id = setInterval(frame, 1);    
    } 

Вы можете увидеть весь HTML здесь: http://test.lundbeckconsulting.no/ContentBox/default.html

Answer 1

Вы устанавливаете bottom:0px на элементе с position:relative. Это ничего не делает.

---

Возможно, вы должны изучить использование jQuery .animate(). Вы можете сделать то же функцию, не заботясь о надоедливых интервалах таймера и т.д. весь Ваш код наверху может быть упрощен следующим образом:

$('#container').animate({'height':0},200,'linear');

Answer 2

Я считаю, что вы вызываете mini() на неверном элементе. Его следует называть container_sub, а не container.

Answer 3

Данный полный пример внутри не дает ясного понимания, которое является родителем и является дочерним.

Есть 2 простых способов сделать эффект вы хотите:

1. Добавить Верхнее поле ребенка, так он движется вниз так же, как высота уменьшается
2. Родительский элемент должен быть position: relative в то время как ребенок должен быть position: absolute для работы внизу

Sidenote # 1: Сделать код более читаемым, изменив стиль элемента dom с его свойством стиля. И при этом вам не нужно устанавливать нижний стиль для каждого кадра анимации.

//From 
elm.setAttribute("style", "height:" + val + "px;bottom:0px;"); 
// To 
elm.style.height = val + 'px'; 
elm.style.bottom = '0px'; 

Sidenote # 2: прочитайте об использовании Window.requestAnimationFrame() для анимации в Javascipt. Sidenote # 3: попробуйте сделать анимацию внутри css, используя комбинацию преобразования и перехода, и послушайте конец анимации с javascript.