Как сохранить значение обновленным внутри 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, который находится позади корзины, чтобы заблокировать экран;dvCart
div, который будет содержать несколько выбранных элементов;
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
, он обновляет левую позицию.