Не получается написать функцию в javascrit. Гуру JavaScript'a help?

Question

[Apxu]

Необходимо вот что реализовать:
Есть переменная в коде файла.js
...
var controller = $.superscrollorama();
...
которая отвечает за работу анимации на сайте. Если ему передать значение false (var controller = false), то анимация перестает работать. Так вот, нужно сделать функцию, которая будет срабатывать при клике на пункт меню и она должна делать примерно вот что: Менять значение переменной var controller на false, после этого запускать таймер на 1.5 секунды, который будет возвращать этой же переменной( var controller) начальное значение(var controller = $.superscrollorama();)

вот мои наброски, но у меня не получается изменить значение переменной в файле.js через мою функцию..может с областью видимости что-то? Или в чем-то другом проблема...возможно такое реализовать?

function foo(){
return controller = false;
setTimeout(function(){
return controller = $.superscrollorama();
}, 1500);
});

Answer 1

[Андрей Малиновский]

Если я правильно вас понял вот пример jsfiddle.net/mz6hybg5/1

Comments

[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 2

[Сергей Мельников]

window.superscrolloramaController = $.superscrollorama();

function foo() {
  window.superscrolloramaController = false;
  setTimeout(function(){
    window.superscrolloramaController = $.superscrollorama();
  }, 1500);
});

но правильнее будет так:

$(function(){
  var controller = $.superscrollorama();

  $("button").on("click", function(){
    controller = false;
    setTimeout(function(){
     controller = $.superscrollorama();
    }, 1500);
  });
})

Comments

[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 3

[Гоша Манн]

return означает выход из функции
var означает, что вы создали новую переменную внутри этой функции
как-то так jsfiddle.net/yhq7hsg9

Comments

[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);