0xD34F

Надо удалять класс, отвечающий за анимацию, после её завершения. Можно делать это по событию animationend:

<button>click me</button>

button {
  background: green;
}

@keyframes xxx {
    0% { background-color: red; }
  100% { background-color: transparent; }
}

.xxx {
  animation: xxx 2s;
}

$('button').on({
  click() {
    $(this).addClass('xxx');
  },
  animationend() {
    $(this).removeClass('xxx');
  },
});

addClass вы делаете, замечательно - а где же removeClass?

https://jsfiddle.net/81d52wac/1/

Потому что все функции, переданные в setTimeout, вызываются после того, как цикл будет выполнен - а значение i к этому моменту будет равно 10.

Как исправить? Есть варианты:

for (var i = 0; i < 10; i++) {
  setTimeout(function() {
    alert(+this);
  }.bind(i), 100);
}

for (let i = 0; i < 10; i++) {
  setTimeout(function() {
    alert(i);
  }, 100);
}

for (var i = 0; i < 10; i++) {
  setTimeout(alert, 100, i);
}

for (var i = 0; i < 10; i++) {
  setTimeout(new Function(`alert(${i})`), 100);
}

for (var i = 0; i < 10; i++) {
  setTimeout(function() {
    alert(i++);
  }, 100);
}
i = 0;

Вместо .mark вешайте обработчик на body. Если клик не на .mark или не на .active - скрывать окно, если клик на .mark, у которого нет active - показывать окно. Типа так:

$('body').on('click', function(e) {
  var
    $target = $(e.target),
    isMark = $target.hasClass('mark'),
    isActive = $target.hasClass('active');

  if (!isMark || !isActive) {
    $('.mark.active +.tooltip').fadeOut();
    $('.mark.active').removeClass('active');
  }

  if (isMark && !isActive) {
    $target.addClass('active');
    $('.mark.active +.tooltip').fadeIn();
  }
});

$(this).closest('[data-category]').attr('data-category');

он не работает

Может, попробуете обрисовать проблему поконкретнее? А то знаете ли, варианты всякие есть. Например:

• В момент навешивания обработчика click элемент #ajax-book не существует
  
• На span внутри #ajax-book повешен обработчик click, где производится отмена всплытия
  
• ajax-book.php не существует или находится в другом месте или доступ к нему запрещён
  
• ошибки в ajax-book.php
  
• ajax-book.php возвращает не json
  

Можно задавать шаг отдельно для каждого счётчика, так же, как и максимальное значение - в атрибуте:

<div data-num="2350" data-step="5" class="number">0</div>

$(window).scroll(function() {
  var $win = $(window);

  if ($('#counter').offset().top < $win.scrollTop() + 200) {
    $win.off('scroll');

    $('.number').addClass('viz').each(function() {
      var
        i = 0,
        num = +this.dataset.num,
        timeStep = 1000 / num,
        valStep = +this.dataset.step || 1,
        interval = setInterval(function($el) {
          if ((i += valStep) >= num) {
            clearInterval(interval);
          }

          $el.html(Math.min(i, num));
        }, timeStep, $(this));
    });
  }
});

Или вычислять шаг:

var steps = 100;

$(window).scroll(function() {
  var $win = $(window);

  if ($('#counter').offset().top < $win.scrollTop() + 200) {
    $win.off('scroll');

    $('.number').addClass('viz').each(function() {
      var
        i = 0,
        num = +this.dataset.num,
        valStep = num / steps,
        interval = setInterval(function($el) {
          if ((i += valStep) >= num) {
            clearInterval(interval);
          }

          $el.html(Math.floor(Math.min(i, num)));
        }, 20, $(this));
    });
  }
});

• Метод querySelectorAll возвращает коллекцию элементов, никакого addEventListener у неё нет - его надо вызывать отдельно у каждого элемента.
  
• Что ещё за e.classList? e - это объект события, а не элемент DOM-дерева.
  
• Класс добавляете, OK - а где же удаление? Вряд ли вам нужно, чтобы элементы могли иметь оба класса одновременно.
  

Насколько я понял, вам нужно нечто такое:

const elems = document.querySelectorAll('nav#menu_3 > ul > li');

elems.forEach(n => n.addEventListener('mouseover', onMouseover));

function onMouseover() {
  elems.forEach(n => {
    n.classList.toggle('zoomed', this === n);
    n.classList.toggle('nozoomed', this !== n);
  });
}

Кнопкам дать общий класс, а для понимания, какая кого должна открывать, добавить data-атрибут, содержащий соответствующий селектор; Спискам, видимость которых надо переключать, тоже дать общий класс:

<a href="#" class="menu-trigger" data-list="#menu">Menu</a>
<a href="#" class="menu-trigger" data-list="#contacts">Contacts</a>
<ul id="menu" class="list">...</ul>
<ul id="contacts" class="list">...</ul>

При нажатии на кнопку прячете все списки, кроме связанного с нажатой кнопкой - его состояние изменяете на противоположное:

$('.menu-trigger').click(function() {
  var list = this.dataset.list;

  $(this).parent().find('.list').not(list).slideUp(0);
  $(list).slideToggle(500);
});

$(window).resize(function() {
  if ($(window).width() > 500) {
    $('.list').removeAttr('style');
  }
});

https://jsfiddle.net/nvgpfm7j/

$('селектор кнопки').click(function() {
  $('селектор-элементов')
    .not('.класс')
    .slice(0, количествоЭлементовКоторымНадоДобавитьКласс)
    .addClass('класс');
});

или

const items = [...document.querySelectorAll('селектор элементов')];

document.querySelector('селектор кнопки').addEventListener('click', () => {
  items
    .splice(0, количествоЭлементовКоторымНадоДобавитьКласс)
    .forEach(n => n.classList.add('класс'));
});

пытался получить так:
console.log($('.wall_post_text', this)).innerText;
Но пишет undefined

Во-первых, опечатка - .innerText надо внутри внешних скобок было разместить, а так вы у результата вызова console.log хотите свойство прочитать (и получаете вы никакой не undefined, а ошибку "cannot read properties of undefined").

Во-вторых, значение свойства innerText надо получать у DOM-элемента, а не jquery объекта. Ну или замените обращение к свойству на вызов метода.

Исправляем:

$('.wall_post_text', this)[0].innerText
// или
$('.wall_post_text', this).get(0).innerText
// или
$('.wall_post_text', this).prop('innerText')
// или
$('.wall_post_text', this).eq(0).text()
// или
$('.wall_post_text:eq(0)', this).text()
// или, если элемент .wall_post_text внутри this один
$('.wall_post_text', this).text()

Так?

в чем тут логика?

Да ни в чём. Один из подводных камней языка. Типа, значение this должно всегда быть объектом, а для null/undefined, в отличие от строк/чисел/bool нет объектных обёрток, поэтому вот такой костыль. В строгом режиме работает как надо:

(function() {
  'use strict';
  var func = function() { console.log(this); };
  func.call(null); // выведет null
})();

var
  path = 'aaa.bbb.ccc.ddd',
  data = {
    aaa: {
      bbb: {
        ccc: {
          ddd: 'Hello!!'
        }
      }
    }
  };

console.log(path.split('.').reduce((p, c) => p[c], data)); // Hello!!

При присваивании копируется ссылка на массив, а не сам массив. Чтобы скопировать массив, есть варианты:

var copy = arr.slice();

var copy = arr.concat();

var copy = [...arr];

var copy = Array.from(arr);

При первом вычислении newFib принимает значение 3 (2 + 1, ага), затем проверка остатка от деления на 2 на равенство единице оказывается истинной и происходит переход к следующей итерации цикла. Снова вычисляется newFib - на основе тех же значений, 2 + 1, снова остаток от деления равен единице - идём на следующий круг и так далее.

Это к вопросу о том, почему цикл не останавливается. А вообще - "пошло не так" у вас в тот момент, когда появилась вот эта безумная конструкция из while(true), break'а в конце тела цикла и continue-костыля, заставляющего цикл работать как цикл.

Говорят, IE не поддерживает arrow functions.

Попробуйте так:

if (i > 10) {
  history.shift();
}

Что до вашего localStorage.removeItem(history[0]), то это не удаление нулевого элемента массива, хранящегося в localStorage, а удаление из localStorage свойства с именем, соответствующим значению нулевого элемента массива history.