Пытаюсь написать свой собственный slideUp

@sash · Регистрация: 09.10.2014

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

Здравствуйте всем. jQuery - это, конечно, круто, но решил попробовать кое-что сделать самостоятельно. Значит, что мы хочим: пока просто без клика чтобы блок плавненько так схлопнулся, т.е. высота = 0

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function O(i) { return typeof i == 'object' ? i : document.getElementById(i) }
function S(i) { return O(i).style                                            }
window.onload=function(){
var heightt = S('div').height;
var height = parseInt(heightt);
console.log(height);
    for(var  i = 0; i < height ; i++){      
        setTimeout((function (obj) {
  return (function (){
        obj.height = (height-i)+'px';
  });
})(S('div')), 3000);    
 
    /*  
        setTimeout(function(){
        S('div').height = (height-i)+'px';
        }, 33); 
    */  
    }
}

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

@vovandr · 05.05.2015, 21:06

Если честно, когда открыл ваш код, то не сразу понял, что вы вообще хотели) Переделывать не стал, чуток изменил, чтобы хотя бы работало (по-хорошему рефакторить все надо, начиная с имен функций и переменных):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function O(i) { return typeof i == 'object' ? i : document.getElementById(i) }
function S(i) { return O(i).style;}
function collapse(duration, height){
   for(var  i = 1; i <= height ; i++){      
       (function(i){
          setTimeout(function(){
                    S('div').height = (height-i)+'px';  
          }, i*duration/height);   
       })(i); 
    } 
} 
window.onload=function(){
var heightt = S('div').height;
var height = parseInt(heightt);    
collapse(3000, height);
}

@Fedor Vlasenko · 05.05.2015, 22:33

Сообщение от sash

Здравствуйте всем. jQuery - это, конечно, круто

круто конечно, я не верстальщик но добавив css анимации и input в руки будет круто
пример без анимации
Да простят меня господа модераторы, не имея собственной песочницы не запрещайте чужую

@Eva Rosalene · 06.05.2015, 02:01

Poznakomlus, ссылки на песочницу не запрещены, но код нужно дублировать на форум. Песочница - лишь дополнение.

Новые блоги и статьи Все статьи Все блоги /
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .

@Eva Rosalene Модератор 5241 / 2115 / 416 Регистрация: 06.01.2013 Сообщений: 4,846
	06.05.2015, 02:01
	Poznakomlus, ссылки на песочницу не запрещены, но код нужно дублировать на форум. Песочница - лишь дополнение. 0

Пытаюсь написать свой собственный slideUp

Решение