Как отключать/включать кусок кода в JavaScript?

Question

[Apxu]

Можно как-то сделать так, чтобы при нажатии на кнопку, скрипт который отвечает за анимацию деактивировался на полторы секунды и снова начинал работать? Но если кнопка нажата не была, то анимация должна работать.. вот примерно, что мне нужно. Реально это сделать? Может хоть скажите в какую сторону копать.:|

скрипт отвечающий за анимацию приведен ниже:

var controller = $.superscrollorama();

// Анимация которую нужно отключать при клике
controller.pin($('#portfolio'), 800, {
anim: (new TimelineMax())
.appendMultiple([
TweenMax.fromTo($('.item-img-box img'), 1,
{css:{top:0, opacity: 1, display: 'inline'}, immediateRender:true},
{css:{top:100, opacity: 0, display: 'none'}, ease:Back.easeIn}),
TweenMax.fromTo($('.portfolio-item'), 1,
{css:{borderTopWidth: 5}, immediateRender:true},
{css:{borderTopWidth: 0}, ease:Back.easeIn}),
TweenMax.fromTo($('.portfolio-item .item-img-box, .portfolio-item .sep-line'), 1,
{css:{opacity: 1}, immediateRender:true},
{css:{height: 0, opacity: 0, display: 'none'}, ease:Back.easeIn}),
TweenMax.fromTo($('.portfolio-item .item-title-box'), 4,
{css:{opacity: 1}, immediateRender:true},
{css:{height: 100, rotation:"360deg"}, ease:Back.easeIn}),
TweenMax.fromTo($('#banner'), 5.5,
{css:{top: 0}, immediateRender:true},
{css:{top: 123}, ease:Back.easeIn}),
TweenMax.fromTo($('#case'), 5.5,
{css:{top: 0, right: 0}, immediateRender:true},
{css:{top: 370, right: 323}, ease:Back.easeIn}),
TweenMax.fromTo($('#sites, #games'), 5.5,
{css:{left: 0}, immediateRender:true},
{css:{left: 323}, ease:Back.easeIn}),
])
.appendMultiple([
TweenMax.fromTo($('#case'), 2,
{css:{scale: 1}, immediateRender:true},
{css:{top: 520, scale: 0.2}, ease:Back.easeIn}),
TweenMax.fromTo($('#games'), 3.5,
{css:{scale: 1}, immediateRender:true},
{css:{top: 420, scale: 0.3}, ease:Back.easeIn}),
TweenMax.fromTo($('#banner'), 5,
{css:{scale: 1}, immediateRender:true},
{css:{top: 534, scale: 0.4}, ease:Back.easeIn}),
TweenMax.fromTo($('#sites'), 6.5,
{css:{scale: 1}, immediateRender:true},
{css:{top: 534, scale: 0.5}, ease:Back.easeIn}),
], "+=3"),

onUnpin: function(){
$('#portfolio').css("position", "relative");
}
}, 0);

Answer 1

[deleted-tnorman]

johnpolacek.github.io/superscrollorama

Вам надо внимательно изучить свойства плагина, который вы используете.
Вполне вероятно там предусмотрена возможность остановки, какой-нибудь простой командой
"controller.stop() или controller.pause()" по крайней мере плагин серьёзный и если такое вообще нужно, то скорее всего в нем имеется.

Comments

[Apxu]

Спасибо, очень полезная информация, буду там искать ответ. У меня вот из-за этого плагина изменяется высота страницы при прокрутке и страдает функциональность якорных ссылок, вы случайно не в курсе как с этим бороться? Нужна помощь по якорным ссылкам на странице с динамической высотой? - вот ссылка на вопрос.

[deleted-tnorman]

@Apxu чисто теоретически, скрипт который определяет, где у вас находятся якорные ссылки, скорее всего отрабатывает лишь один раз. При загрузке страницы и сохраняет координаты этих ссылок по высоте. Вам не помешало бы придумать способ, как "Освежить" его информацию о текущей страницы, после изменений параметров высоты страницы. Честно говоря трудно посоветовать какой-то конкретный способ, но могу дать две наводки.

Во первых. Вам нужно найти этот момент в скрипте, который цепляется за якорные ссылки.
Во вторых, нужно взять это событие под контроль и иметь возможность его повторить (если это в этом же плагине, то наверняка там есть какой-то метод, который обновляет данные).
В третьих повесить слушатель события изменения страницы и при изменении "освежать" информацию у скроллера.

Но это всё будет работать только если догадка по поводу природы скроллера верна.

[Apxu]

Спасибо за совет, я попробую