不明白为什么简单的 Greensock 动画没有 运行
Don't understand why simple Greensock animation doesn't run
我正在学习本教程:https://ihatetomatoes.net/greensock-timelinelite-tutorial
我的码笔到此为止(只到教程的1/4左右):
http://codepen.io/Chiz/pen/qOxVvm
根据JS代码,3个框应该运行对吧?我对比了教程文章中的代码,是一样的。不知道教程代码有没有错误
另一件事是:JQuery UI 滑块应该显示在 3 个框下方,但我的没有任何显示,尽管我非常确定 JQuery UI 滑块代码正确。
有什么想法吗?
// 1. Create a variable
var $box = $("#box"),
$box2 = $("#box2"),
$box3 = $("#box3"),
t1 = new TimelineLite();
tl.from($box, 1, {
y: '-=40',
autoAlpha: 0,
ease: Power4.easeInOut
}) // no comma or semi-colon
.from($box2, 1, {
y: '-=40',
autoAlpha: 0,
ease: Power4.easeInOut
}) // no comma or semi-colon
.from($box3, 1, {
y: '-=40',
autoAlpha: 0,
ease: Power4.easeInOut
});
// 4. Create a Slider to Control Playback
$("#slider").slider();
// updateSlider function
function updateSlider() {
$("#slider").slider("value", tl.progress() * 100);
}
html,
body {
height: 100%;
}
body {
background-color: #262626;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
}
h1 {
font-size: 16px;
width: 300px;
color: #838484;
font-weight: 300;
text-align: center;
span {
color: #89c540;
}
strong {
color: #fff;
}
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,
-180px);
padding:10px 20px;
border:1px solid transparentize(white,
.7);
}
.box {
background-color: #88ce02;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-155%, -50%);
z-index: 1;
}
#box2 {
transform: translate(-50%, -50%);
}
#box3 {
transform: translate(55%, -50%);
}
.boxSmall {
position: absolute;
background-color: #70a40b;
position: absolute;
bottom: 0;
left: 0;
width: 25px;
height: 75px;
z-index: 2;
}
.boxTiny {
background-color: #577a14;
height: 50px;
bottom: 0;
right: 0;
left: auto;
z-index: 3;
}
#controls {
position: absolute;
top: 50%;
left: 50%;
width: 310px;
transform: translate(-50%, 120px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<h1><strong>Green<span>Sock</span></strong> - TimelineLite</h1>
<div id="box" class="box">
<div class="boxSmall"></div>
<div class="boxSmall boxTiny"></div>
</div>
<div id="box2" class="box">
<div class="boxSmall"></div>
<div class="boxSmall boxTiny"></div>
</div>
<div id="box3" class="box">
<div class="boxSmall"></div>
<div class="boxSmall boxTiny"></div>
</div>
<div id="controls">
<div id="slider"></div>
</div>
不应该是 t1
但应该是 tl
.
变化:
t1 = new TimelineLite();
至:
tl = new TimelineLite();
我正在学习本教程:https://ihatetomatoes.net/greensock-timelinelite-tutorial
我的码笔到此为止(只到教程的1/4左右): http://codepen.io/Chiz/pen/qOxVvm
根据JS代码,3个框应该运行对吧?我对比了教程文章中的代码,是一样的。不知道教程代码有没有错误
另一件事是:JQuery UI 滑块应该显示在 3 个框下方,但我的没有任何显示,尽管我非常确定 JQuery UI 滑块代码正确。
有什么想法吗?
// 1. Create a variable
var $box = $("#box"),
$box2 = $("#box2"),
$box3 = $("#box3"),
t1 = new TimelineLite();
tl.from($box, 1, {
y: '-=40',
autoAlpha: 0,
ease: Power4.easeInOut
}) // no comma or semi-colon
.from($box2, 1, {
y: '-=40',
autoAlpha: 0,
ease: Power4.easeInOut
}) // no comma or semi-colon
.from($box3, 1, {
y: '-=40',
autoAlpha: 0,
ease: Power4.easeInOut
});
// 4. Create a Slider to Control Playback
$("#slider").slider();
// updateSlider function
function updateSlider() {
$("#slider").slider("value", tl.progress() * 100);
}
html,
body {
height: 100%;
}
body {
background-color: #262626;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
}
h1 {
font-size: 16px;
width: 300px;
color: #838484;
font-weight: 300;
text-align: center;
span {
color: #89c540;
}
strong {
color: #fff;
}
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,
-180px);
padding:10px 20px;
border:1px solid transparentize(white,
.7);
}
.box {
background-color: #88ce02;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-155%, -50%);
z-index: 1;
}
#box2 {
transform: translate(-50%, -50%);
}
#box3 {
transform: translate(55%, -50%);
}
.boxSmall {
position: absolute;
background-color: #70a40b;
position: absolute;
bottom: 0;
left: 0;
width: 25px;
height: 75px;
z-index: 2;
}
.boxTiny {
background-color: #577a14;
height: 50px;
bottom: 0;
right: 0;
left: auto;
z-index: 3;
}
#controls {
position: absolute;
top: 50%;
left: 50%;
width: 310px;
transform: translate(-50%, 120px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<h1><strong>Green<span>Sock</span></strong> - TimelineLite</h1>
<div id="box" class="box">
<div class="boxSmall"></div>
<div class="boxSmall boxTiny"></div>
</div>
<div id="box2" class="box">
<div class="boxSmall"></div>
<div class="boxSmall boxTiny"></div>
</div>
<div id="box3" class="box">
<div class="boxSmall"></div>
<div class="boxSmall boxTiny"></div>
</div>
<div id="controls">
<div id="slider"></div>
</div>
不应该是 t1
但应该是 tl
.
变化:
t1 = new TimelineLite();
至:
tl = new TimelineLite();