Пользовательская анимация с JavaScript

Question

Я пытаюсь сделать очень простую, настраиваемую анимацию с помощью JavaScript. Я использую библиотеку Modernizr для обнаружения поддержки HTML5, и если браузер не поддерживает переходы CSS3, я хотел бы иметь свой собственный (не jQuery) скрипт, воссоздающий тот же эффект переходов CSS3.

Моя идея для этого кода такова:

JS:

function slide() {
  var cur = 0;
  while (cur <= 50) {
    setInterval("document.getElementById('slider').style.marginLeft=cur + 'px'",100);
    cur = cur++;
  }
}

HTML (для зависания):

<div id="slider" onmouseover="slide()">
  This should slide left.
</div>

Это не работает (я знаю, что оно не зацикливается, это одна из проблем, которую я не могу понять). Я довольно новичок в JS, поэтому я не знаю довольно простых вещей.

Основная причина, по которой я не хочу использовать jQuery, заключается в образовательных целях. Я хочу знать основы JS, прежде чем изучу jQuery, просто чтобы знать, как делать то, что я хочу.

Я бы хотел, чтобы это работало для двух разных случаев: одно - автоматически, другое - только при наведении (и версия при наведении не должна повторяться). Я работал над парением, но чем больше ты зависал над ним, тем быстрее он двигался.

Спасибо!

Answer 1

function slide() {
  var cur = 0;
  while (cur >= 50) {
    setInterval("document.getElementById('slider').style.marginLeft=cur + 'px'",100);
    cur = cur++;
  }
}

Ваш код устанавливает cur на 0, а затем условие while равно cur >= 50 (* в то время как cur переменная больше или равна 50), что никогда не будет истинным, потому чтооно равно 0.

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

Если бы мне было поручено написать это, это может выглядеть так ...

function slide(element, newHeight) {
    var currentHeight = element.offsetHeight;
    var increaseHeight = function() {
        currentHeight += 10;
        element.style.height = currentHeight + 'px';
    }
    var interval = setInterval(function() {
        if (currentHeight >= newHeight) {
            clearInterval(interval);
        }
        increaseHeight();
    }, 100);
}

jsFiddle .

Answer 2

Есть много примеров скольжения в javascript.

Вот один из них.

http://www.harrymaugans.com/2007/03/06/how-to-create-an-animated-sliding-collapsible-div-with-javascript-and-css/

В вашем примере, если вы используете setInterval, вы также захотите позвонить clearInterval. Описание обоих вы можете посмотреть по адресу: https://developer.mozilla.org/en/window.setInterval

Надеюсь, вы на самом деле не используете функцию onmouseover в элементе, как показано, но вместо этого проверяете, нужно ли вам это, а затем устанавливаете ее после загрузки страницы.

Возможно, вы захотите взглянуть на ненавязчивый javascript, чтобы понять, как это можно сделать хорошо.

Есть разные статьи на эту тему, но вы можете начать с:

http://labs.adobe.com/technologies/spry/articles/best_practices/separating_behavior.html