Javascript "для" Loop не работает?

Question

У меня есть файл Javascript, который я использую, чтобы попытаться анимировать выпадающее меню.У меня есть функция «Переключить» в этом файле для запуска, когда я нажимаю на определенный div.Вот скрипт, который я использую:

var up = true;
        function Toggle(x)
    {
        if (up)
        {
            for (var i = x.offsetTop; i <= 0; i++)
            {
                x.style.top = i;
                if (i == 0)
                {
                    up = false; 
                }
            }
        }

        else if (up == false)
        {
            for (var i = x.offsetTop; i >= -50; i--)
            {
                x.style.top = i;
                if (i == -50)
                {
                    up = true;
                }
            }
        }
    }

В HTML-элементе div, который я хочу анимировать, у меня установлено свойство onclick для onclick = Toggle (this).Первый цикл for работает как надо (он устанавливает верхнее смещение div в 0).Тем не менее, второй цикл for не устанавливает offsetTop.Я знаю, что цикл for активируется, потому что я проверил его, и он дает мне каждое целое число от 0 до -50.Почему не устанавливается смещение?

Answer 1

1) Вы должны указать единицу сверху, то есть: x.style.top = i +"px"

2) Ваша функция не будет анимироваться, вместо того, чтобы использовать setInterval или setTimeout

Как вы и просили, пример. Я бы не стал так делать для одного из моих проектов, но я сохранил вашу функцию, чтобы вы лучше познакомились с кодом. Я использовал setTimeout вместо setInterval, потому что setInterval должен быть очищен, когда он не нужен, а setTimeout запускается только один раз:

var Toggle = (function() { // use scope to define up/down
    var up = true; 
    return function(element) {
        var top = parseInt(element.style.top, 10); // element.offsetTop ?
        if ( !top ) {
            top = 0;
        }

        if (up) {
            if (element.offsetTop < 0) { // if we are not at 0 and want to get up
                element.style.top = (top+1) + "px";
                setTimeout(function() { Toggle(element); }, 10); // recall the function in 10 ms
            } else { // we change up value
                up = !up;  
            }
        }
        else {
            if (element.offsetTop > -50) {
                element.style.top = (top-1) + "px";
                setTimeout(function() { Toggle(element); }, 10); // recall the function in 10 ms
            } else {
                up=!up;
            }
        }
    }
})();

Answer 2

Вы должны использовать x.style.top = i + 'px' в качестве top, и аналогичные свойства css должны определять тип (px, em, % и т. Д.), Если они не равны 0, так как это 0 вв любом случае.

Но ваш скрипт на самом деле привязывает div непосредственно к -50px, так как вы не ждете между этими шагами итерации.

Я бы рекомендовал использоватьбиблиотека типа jQuery для использования метода animate().

function Toggle(obj) {
  $(obj).animate({ 
    top: parseInt($(obj).css('top')) === 0 ? '-50px' : '0px'
  })
}