Написание моей функции nextPage () в качестве глобальной функции, чтобы к ней мог получить доступ событие onclick

Моя цель - заставить все анимации работать, вызывая отдельные элементы вместо того, чтобы просто использовать "рандомизатор" или "список меню Dl".

Прежде всего здесь JSFiddle. Я оставил его неизменным и идентичным оригиналу (за исключением того, что многоуровневое меню не отображается, не знаю, почему: http://jsfiddle.net/EbhdM/3/

Это оригинальная демонстрация http://tympanus.net/Development/PageTransitions/

Я пытаюсь решить это с месяца, читая статьи javascript и экспериментируя с вещами.

Я намерен использовать случаи в моей функции nextPage(), поэтому я удалил функцию on click в HTML и написал следующее:

<button type="button" data-animation="1" class="btn">PAGE 1</button>

Это позволяет мне писать столько кнопок, сколько хочу, если у меня есть класс = "btn"

Я связал событие on click с кнопками, которые имеют класс btn, чтобы вызвать мои анимации в функции nextPage()

$(".btn").on('click', function (event) {
    var dataAnimation = $(this).attr('data-animation');
    nextPage(dataAnimation);
});

значение в моей анимации данных будет моим "случаем" в функции nextPage(). Номер случая означает номер анимации. Есть 67 анимаций.

Пока мне удалось привязать его к анимации с помощью кнопок, но я не могу его оживить. Im действительно стартер, когда дело доходит до javascript, но я старался изо всех сил. Я не знаю решений, и я был бы очень рад, если бы вы помогли мне решить эту проблему, объяснив мне, что я сделал не так.

Здесь JsFiddle о том, что я говорю о http://jsfiddle.net/7rGkd/1/

Я предполагаю, что это сработает, если я напишу функцию nextPage() как глобальную функцию, чтобы к ней можно было получить событие onclick, но как? Как это написать?