我正在创建一个简单的动画横幅类型的东西，它只显示一些字符串和一个图像。我让它工作，然后我更改了一些变量名，但似乎无法找到它不工作的原因。
https://jsfiddle.net/06uto8av/3/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animate</title>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 200%;
}
#container {
width: 700px;
height: 400px;
background-color: black;
margin: 40px auto;
position: relative;
overflow: hidden;
opacity: 0;
}
.quote {
font-size: 3em;
font-weight: bold;
position: absolute;
width: 600px;
text-align: center;
top: 60px;
left: 0px;
color: crimson;
text-shadow: 3px 3px 8px rgba(0,0,0,0.5);
}
#img {
top: 60px;
}
img {
position: relative;
width:620px;
bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div class="quote" id="quote1">Thirsty?</div>
<div class="quote" id="quote2">Love beer?</div>
<div class="quote" id="quote3">Well look no further!</div>
<div class="quote" id="quote4">Come on down to...</div>
<div class="quote" id="quote5">Steve's Bar!</div>
<div class="quote" id="img"><img src="img/stevebar.jpg" alt="steve bar"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineLite.min.js"></script>
<script>
var idContainer = document.getElementById("container");
var idQuote1 = document.getElementById("quote1");
var idQuote2 = document.getElementById("quote2");
var idQuote3 = document.getElementById("quote3");
var idQuote4 = document.getElementById("quote4");
var idQuote5 = document.getElementById("quote5");
var idImg = document.getElementById("img");
var tl1 = new TimelineLite();
tl1.to(idContainer,1,{opacity:1})
.from(idQuote1, 1, {x: 600, skewX:-30, ease:Bounce.easeOut} )
.to(idQuote1, 1, {delay: 1, x: 1000, ease:Back.easeIn }, )
.from(idQuote2, 1, {x: -700, ease:Elastic.easeOut } )
.to(idQuote2 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote3, 1, {scale:0,ease:Back.easeOut } )
.to(idQuote3, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote4, 1, {delay:1.5, scale:8, opacity:0 } )
.to(idQuote4, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote5, 1, {x: -700, ease:Back.easeOut },)
.to(idQuote5, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idImg, 1, {scale: 0, opacity: 0, ease:Back.easeOut},"-=0.5");
</script>
</body>
</html>
最佳答案
您缺少一个逗号 ;) 请参阅:https://jsfiddle.net/0Le94gsL/
tl1.to(idContainer,1,{opacity:1})
.from(idQuote1, 1, {x: 600, skewX:-30, ease:Bounce.easeOut} )
.to(idQuote1, 1, {delay: 1, x: 1000, ease:Back.easeIn }, )
.from(idQuote2, 1, {x: -700, ease:Elastic.easeOut } )
.to(idQuote2, 1, {delay: 1, x: 1000, ease:Back.easeIn }) // You needed a comma here just after idQuote2
.from(idQuote3, 1, {scale:0,ease:Back.easeOut } )
.to(idQuote3, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote4, 1, {delay:1.5, scale:8, opacity:0 } )
.to(idQuote4, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote5, 1, {x: -700, ease:Back.easeOut },)
.to(idQuote5, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idImg, 1, {scale: 0, opacity: 0, ease:Back.easeOut},"-=0.5");
关于javascript - 动画功能不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44317658/