Как сохранить значение обновленным внутри TimelineMax?

Мне нужна функция, которая возвращает мне значение, необходимое для смещения, которое будет выполняться каждый раз, когда вызывается строка. Если я использую line.play() или же line.reverse() значение кэшируется, а функция не вызывается. Как я могу заставить его вызывать эту функцию каждый раз (но не пересоздавать временную шкалу вообще каждый раз)?

Вот код:

var line;

var getLeftPosition = function() {
    return ($("body").width() - $("#dvCart").width()) + "px";
}

$("#btnCart").click(function () {

    if (!line) {
        line = new TimelineMax()
            .to("#dvCart", .1, { display: "block" })
            .to("#dvLock", .7, {
                backgroundColor: "#fff",
                opacity: 0.5,
                filter: "alpha(opacity=20)",
                width: "100%",
                height: "100%",
                top: "0",
                left: "0",
                position: "fixed",
                display: "block",
                ease: Power3.easeInOut
            })
            .to("#dvCart", .5, {
                "left": getLeftPosition(),
                ease: Power3.easeInOut
            });

        $("#dvLock").click(function () {
            line.reverse();
        });
    }
    else {
        line.play();
    }
});

Чтобы помочь чтению:

  • при первом нажатии я хочу, чтобы он инициализировал временную шкалу;
  • через раз он просто будет воспроизводить временную шкалу;
  • когда dvLock нажата, корзина должна исчезнуть;
  • dvLock это div, который находится позади корзины, чтобы заблокировать экран;
  • dvCartdiv, который будет содержать несколько выбранных элементов;

1 ответ

После размещения этого вопроса стало понятно, как искать. После некоторого поиска, я нашел способ сделать это: использовать функцию updateTo на TweenMax.

Я отвечаю на мой вопрос, чтобы помочь всем, кому это может понадобиться.

Код стал примерно таким:

var line;

var getLeftPosition = function() {
    return ($("body").width() - $("#dvCart").width()) + "px";
}

var moveToLeft;

$("#btnCart").click(function () {

    if (!line) {

        line = new TimelineMax()
            .to("#dvLock", .1, { zIndex: 1031 })
            .to("#dvCart", .1, { display: "block" })
            .to("#dvLock", .7, {
                backgroundColor: "#fff",
                opacity: 0.5,
                filter: "alpha(opacity=20)",
                width: "100%",
                height: "100%",
                top: "0",
                left: "0",
                position: "fixed",
                display: "block",
                ease: Power3.easeInOut
            })
            .append(moveToLeft = TweenMax.to("#dvCart", .5, {
                "left": getLeftPosition(),
                ease: Power3.easeInOut
            }));

        $("#dvLock").click(function () {
            moveToLeft.updateTo({
                "left": getLeftPosition()
            });
            line.reverse();
        });

    }
    else {
        moveToLeft.updateTo({
            "left": getLeftPosition()
        });
        line.play();
    }
});

Итак, перед каждым reverse или же play, он обновляет левую позицию.

Другие вопросы по тегам