我正在尝试调整在代码笔here上找到的javaScript动画，以显示带有预定文本的信使式聊天框。我已经在工作区中设置了jquery并启用了javascript，但是脚本未运行。我知道外部文件已正确链接，并且我已经测试了jQuery是否在我正在工作的网站上正常工作（确实如此）。
当我将代码放在任何在线编译器中时，我注意到，它起作用了！但是用我自己的代码我什么也没得到。我已经附加了html，css和js文件，但是我迷失了为什么动画不显示。我对此很陌生，希望它只是我的一个小错误。
针对长篇文章采取先发制人的道歉，力求做到尽可能透彻。
var chatMessages = [{
name: "ms1",
msg: "Who are you?",
delay: 1000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms2",
msg: "We are young team of entrepreneurs, developers, designers and visionaries. We are based in Berlin and started working on Freedactics in early 2015.",
delay: 6000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms3",
msg: "Could you describe Freedactics in one sentence?",
delay: 3000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms4",
msg: "Everything from lecture to exam in your pocket: Freedactics is a cloud-based platform build for students needs.",
delay: 7000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms5",
msg: "And the longer version?",
delay: 3000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms6",
msg: "As students we use to organize all our daily life around web and mobile technology, except the actual studying part. For learning we still use huge amounts of paper, books and heavy backpacks.",
delay: 11000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms7",
msg: "Why? Because there is no solution out there to help students or teachers to easily digitalize their learning processes and contents. We think that learning should be fast, simple and effective. A platform for studying should give people the option to learn at their own scope, with their own contents integrated.",
delay: 10000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms8",
msg: "This is why we developed Freedactics – a cloud-based solution tailored to students needs.",
delay: 8000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms9",
msg: "What makes you different from other learning platforms?",
delay: 4000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms10",
msg: "We understand the needs of individual student. We don’t focus so much on content publishing or learning management but on learning. At the same time we acknowledge the need to integrate different perspectives, such as flash cards, content and task management.",
delay: 8000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms11",
msg: "So we end up with a unique mix of focus on User Experience and thrive towards integration.",
delay: 4000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms12",
msg: "What is your vision for the future?",
delay: 4000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms14",
msg: "We are releasing an App right now. But that’s only breaking ground. In fact, we have something much bigger in mind: a universe of education! Our vision is to connect people, connect tools and power learning through intelligent systems.",
delay: 9000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms15",
msg: "Thanks! Something you want to add?",
delay: 3000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms16",
msg: "You are welcome! Yes, check out freedactics.com!",
delay: 9000,
align: "left",
showTime: true,
time: "19:58"
}
];
var chatDelay = 0;
function onRowAdded() {
$('.chat-container').animate({
scrollTop: $('.chat-container').prop('scrollHeight')
});
};
$.each(chatMessages, function(index, obj) {
chatDelay = chatDelay + 4000;
chatDelay2 = chatDelay + obj.delay;
chatDelay3 = chatDelay2 + 10;
scrollDelay = chatDelay;
chatTimeString = " ";
msgname = "." + obj.name;
msginner = ".messageinner-" + obj.name;
spinner = ".sp-" + obj.name;
if (obj.showTime == true) {
chatTimeString = "<span class='message-time'>" + obj.time + "</span>";
}
$(".chat-message-list").append("<li class='message-" + obj.align + " " + obj.name + "' hidden><div class='sp-" + obj.name + "'><span class='spinme-" + obj.align + "'><div class='spinner'><div class='bounce1'></div><div class='bounce2'></div><div class='bounce3'></div></div></span></div><div class='messageinner-" + obj.name + "' hidden><span class='message-text'>" + obj.msg + "</span>" + chatTimeString + "</div></li>");
$(msgname).delay(chatDelay).fadeIn();
$(spinner).delay(chatDelay2).hide(1);
$(msginner).delay(chatDelay3).fadeIn();
setTimeout(onRowAdded, chatDelay);
setTimeout(onRowAdded, chatDelay3);
chatDelay = chatDelay3;
});#wrapper {
width: 600px;
margin: 50px auto;
}
body {
font-family: Arial;
background: #fff;
}
.chat ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.message-left .message-time {
display: block;
font-size: 12px;
text-align: left;
padding-left: 30px;
padding-top: 4px;
color: #ccc;
font-family: Courier;
}
.message-right .message-time {
display: block;
font-size: 12px;
text-align: right;
padding-right: 20px;
padding-top: 4px;
color: #ccc;
font-family: Courier;
}
.message-left {
text-align: left;
margin-bottom: 16px;
}
.message-left .message-text {
max-width: 80%;
display: inline-block;
background: #fff;
padding: 15px;
font-size: 14px;
color: #999;
border-radius: 30px;
font-weight: 100;
line-height: 1.5em;
}
.message-right {
text-align: right;
margin-bottom: 16px;
}
.message-right .message-text {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 15px;
font-size: 14px;
color: #fff;
border-radius: 30px;
line-height: 1.5em;
font-weight: 100;
text-align: left;
}
.chat {
border-radius: 30px;
padding: 20px;
background: #f5f7fa;
}
.chat-container {
height: 400px;
overflow-y: scroll;
padding-right: 16px;
}
.spinme-right {
display: inline-block;
padding: 15px 20px;
font-size: 14px;
border-radius: 30px;
line-height: 1.25em;
font-weight: 100;
opacity: 0.2;
}
.spinme-left {
display: inline-block;
padding: 15px 20px;
font-size: 14px;
color: #ccc;
border-radius: 30px;
line-height: 1.25em;
font-weight: 100;
opacity: 0.2;
}
.spinner {
margin: 0;
width: 30px;
text-align: center;
}
.spinner > div {
width: 10px;
height: 10px;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
background: rgba(0,0,0,1);
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0)
}
40% {
-webkit-transform: scale(1.0)
}
}
@keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<div class="chat">
<div class="chat-container">
<div class="chat-listcontainer">
<ul class="chat-message-list">
</ul>
</div>
</div>
</div>
</div>
然后下面是我的html和CSS
var chatMessages = [{
name: "ms1",
msg: "Who are you?",
delay: 1000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms2",
msg: "We are young team of entrepreneurs, developers, designers and visionaries. We are based in Berlin and started working on Freedactics in early 2015.",
delay: 6000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms3",
msg: "Could you describe Freedactics in one sentence?",
delay: 3000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms4",
msg: "Everything from lecture to exam in your pocket: Freedactics is a cloud-based platform build for students needs.",
delay: 7000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms5",
msg: "And the longer version?",
delay: 3000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms6",
msg: "As students we use to organize all our daily life around web and mobile technology, except the actual studying part. For learning we still use huge amounts of paper, books and heavy backpacks.",
delay: 11000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms7",
msg: "Why? Because there is no solution out there to help students or teachers to easily digitalize their learning processes and contents. We think that learning should be fast, simple and effective. A platform for studying should give people the option to learn at their own scope, with their own contents integrated.",
delay: 10000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms8",
msg: "This is why we developed Freedactics – a cloud-based solution tailored to students needs.",
delay: 8000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms9",
msg: "What makes you different from other learning platforms?",
delay: 4000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms10",
msg: "We understand the needs of individual student. We don’t focus so much on content publishing or learning management but on learning. At the same time we acknowledge the need to integrate different perspectives, such as flash cards, content and task management.",
delay: 8000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms11",
msg: "So we end up with a unique mix of focus on User Experience and thrive towards integration.",
delay: 4000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms12",
msg: "What is your vision for the future?",
delay: 4000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms14",
msg: "We are releasing an App right now. But that’s only breaking ground. In fact, we have something much bigger in mind: a universe of education! Our vision is to connect people, connect tools and power learning through intelligent systems.",
delay: 9000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms15",
msg: "Thanks! Something you want to add?",
delay: 3000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms16",
msg: "You are welcome! Yes, check out freedactics.com!",
delay: 9000,
align: "left",
showTime: true,
time: "19:58"
}
];
var chatDelay = 0;
function onRowAdded() {
$('.chat-container').animate({
scrollTop: $('.chat-container').prop('scrollHeight')
});
};
$.each(chatMessages, function(index, obj) {
chatDelay = chatDelay + 4000;
chatDelay2 = chatDelay + obj.delay;
chatDelay3 = chatDelay2 + 10;
scrollDelay = chatDelay;
chatTimeString = " ";
msgname = "." + obj.name;
msginner = ".messageinner-" + obj.name;
spinner = ".sp-" + obj.name;
if (obj.showTime == true) {
chatTimeString = "<span class='message-time'>" + obj.time + "</span>";
}
$(".chat-message-list").append("<li class='message-" + obj.align + " " + obj.name + "' hidden><div class='sp-" + obj.name + "'><span class='spinme-" + obj.align + "'><div class='spinner'><div class='bounce1'></div><div class='bounce2'></div><div class='bounce3'></div></div></span></div><div class='messageinner-" + obj.name + "' hidden><span class='message-text'>" + obj.msg + "</span>" + chatTimeString + "</div></li>");
$(msgname).delay(chatDelay).fadeIn();
$(spinner).delay(chatDelay2).hide(1);
$(msginner).delay(chatDelay3).fadeIn();
setTimeout(onRowAdded, chatDelay);
setTimeout(onRowAdded, chatDelay3);
chatDelay = chatDelay3;
});/*::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent
}*/
body, html{
height: 100%;
}
body {
margin: 0px;
padding: 0px;
color: black;
font-size: 12px;
font-family: Helvetica, Arial, sans-serif;
/*overflow: hidden; hides scroll bar for page1 animation*/
}
header {
width: 275px;
height: 100px;
margin: 0 0 0 30px;
}
h1 {
position: absolute;
margin: 0;
padding: 0;
text-align: center;
color: #fff;
text-shadow: 0 5px 10px rgba(0,0,0,1);
/*mix-blend-mode: overlay;*/ /*allows for a more adaptable font*/
font-size: 32px;
font-family: Bungee, cursive;
}
aside, section, article, footer, header, video {
display: block;
}
nav {
position:sticky;
top:0;
z-index: 40;
}
footer {
position: fixed;
bottom: 0px;
clear: both;
font-size: 10px;
color: white;
}
aside h3 {
padding-top: 20px;
font-family: Georgia, serif;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0 100px;
overflow: hidden;
background-image: url(images/ulbg.png);
background-repeat: repeat;
background-color: rgb(34,46,80);
opacity: 0.5;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 12px 50px;
text-decoration: none;
}
nav li a:link {
background-color: rgba(82,101,91,0.7);
color: white;
text-decoration: none;
}
nav li a:hover, nav li a:focus {
background: #36453d;
}
.home-bg{
background-image: url(images/Bgtest.png);
height: 100%;
background-repeat: repeat;
/*background-size: cover;*/
}
.source-bg{
background-image: url(images/Bgtest.png);
height: 100%;
background-repeat: repeat;
}
.info-bg{
background-image: url(images/Bgtest.png);
height: 100%;
background-repeat: repeat;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: white;
}
a:active {
color: white;
}
@keyframes phonebody {
from {opacity:0; left: 0px; bottom:-500px;}
to {opacity:1; left: 0px; bottom: 0px;}
}
@keyframes screen {
from {opacity:0; left: 0px; bottom:-460px;}
to {opacity:1; left: 0px; bottom: 0px;}
}
@keyframes icon1 {
0% {transform: scale(.0001) rotateZ(360deg);}
100%{transform: scale(.99) rotateZ(-360deg);}
}
@keyframes icon2 {
from {opacity:0; bottom:-500px;}
to {opacity:1; bottom:0px;}
}
@keyframes icon4 {
from {transform: scale(.0001); opacity:0; bottom:-500px;}
to {transform: scale(.99); opacity:1; bottom:0px;}
}
@keyframes infoverlay {
from {opacity:0;}
to {opacity:0.9;}
}
.cssphone {
width: 600px;
height: 800px;
margin: 50px auto;
border-radius: 10px;
position: relative;
background-color: #333;
animation-name: phonebody;
animation-duration: 1.5s;
display: block;
}
.cssphone2 {
width: 600px;
height: 800px;
margin: 50px auto;
border-radius: 10px;
position: relative;
background-color: #333;
box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
animation-name: phonebody;
animation-duration: 1.5s;
display: flex; /*allows the use of margin:auto auto;*/
z-index:10;
}
.cssscreen {
width: 95%;
height: 90%;
clear:both;
margin: auto auto;/*centers the "screen"*/
border-radius: 10px;
position: relative;
background-color: black/*#c0fff4*/;
animation-name: screen;
animation-duration: 1.5s;
display: block;
z-index:20;
}
.phoneicon1 {
width: 200px;
height: 200px;
margin: 15px 0 0 15px;
position: relative;
float: left;
background-image: url(images/sourceicon1.jpg);
animation-name: icon1;
animation-duration: 1.7s;
display: block;
z-index:30;
}
.phoneicon2 {
width: 325px;
height: 200px;
margin: 15px 0 0 15px;
position: relative;
float: left;
background-image: url(images/sourceicon2.jpg);
animation-name: icon2;
animation-duration: 1.6s;
display: block;
z-index:30;
}
.phoneicon3 {
width: 408px;
height: 280px;
margin: 15px 0 0 15px;
position: relative;
float: left;
background-image: url(images/sourceicon3.jpg);
animation-name: icon2;
animation-duration: 1.2s;
display: block;
z-index:30;
}
.phoneicon4 {
width: 132px;
height: 132px;
margin: 15px 0 0 10px;
position: relative;
float: left;
background-image: url(images/sourceicon4.png);
animation-name: icon4;
animation-duration: 1.9s;
display: block;
z-index:30;
}
.phoneicon5 {
width: 132px;
height: 132px;
margin: 15px 0 0 10px;
position: relative;
float: left;
background-image: url(images/sourceicon5.png);
animation-name: icon2;
animation-duration: 1.4s;
display: block;
z-index:30;
}
.phoneicon6 {
width: 540px;
height: 190px;
margin: 15px 0 0 15px;
position: relative;
float: left;
background-image: url(images/sourceicon6.jpg);
animation-name: icon2;
animation-duration: 1.5s;
display: block;
z-index:30;
}
.text {
display:none;
}
.phoneicon1:hover .text {
width: 100%;
height: 100%;
display:block;
color:black;
font-size: 20px;
position: absolute;
text-align: center;
background-color: #708090;
opacity: 0.9;
animation-name: infoverlay;
animation-duration: 1s;
font-family: 'Roboto', sans-serif;
}
.phoneicon2:hover .text {
width: 100%;
height: 100%;
display:block;
color:black;
font-size: 20px;
position: absolute;
text-align: center;
background-color: #708090;
opacity: 0.9;
animation-name: infoverlay;
animation-duration: 1s;
font-family: 'Roboto', sans-serif;
}
.phoneicon3:hover .text {
width: 100%;
height: 100%;
display:block;
color:black;
font-size: 20px;
position: absolute;
text-align: center;
background-color: #708090;
opacity: 0.9;
animation-name: infoverlay;
animation-duration: 1s;
font-family: 'Roboto', sans-serif;
}
.phoneicon5:hover .text {
width: 100%;
height: 100%;
display:block;
color:black;
font-size: 20px;
position: absolute;
text-align: center;
background-color: #708090;
opacity: 0.9;
animation-name: infoverlay;
animation-duration: 1s;
font-family: 'Roboto', sans-serif;
}
.phoneicon6:hover .text {
width: 100%;
height: 100%;
display:block;
color:black;
font-size: 20px;
position: absolute;
text-align: center;
background-color: #708090;
opacity: 0.9;
animation-name: infoverlay;
animation-duration: 1s;
font-family: 'Roboto', sans-serif;
}
/*javascript stuff test*/
#wrapper {
width: 600px;
margin: 50px auto;
}
.chat ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.message-left .message-time {
display: block;
font-size: 12px;
text-align: left;
padding-left: 30px;
padding-top: 4px;
color: #ccc;
font-family: Courier;
}
.message-right .message-time {
display: block;
font-size: 12px;
text-align: right;
padding-right: 20px;
padding-top: 4px;
color: #ccc;
font-family: Courier;
}
.message-left {
text-align: left;
margin-bottom: 16px;
}
.message-left .message-text {
max-width: 80%;
display: inline-block;
background: #fff;
padding: 15px;
font-size: 14px;
color: #999;
border-radius: 30px;
font-weight: 100;
line-height: 1.5em;
}
.message-right {
text-align: right;
margin-bottom: 16px;
}
.message-right .message-text {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 15px;
font-size: 14px;
color: #fff;
border-radius: 30px;
line-height: 1.5em;
font-weight: 100;
text-align: left;
}
.chat {
border-radius: 30px;
padding: 20px;
background: #f5f7fa;
}
.chat-container {
height: 400px;
overflow-y: scroll;
padding-right: 16px;
}
.spinme-right {
display: inline-block;
padding: 15px 20px;
font-size: 14px;
border-radius: 30px;
line-height: 1.25em;
font-weight: 100;
opacity: 0.2;
}
.spinme-left {
display: inline-block;
padding: 15px 20px;
font-size: 14px;
color: #ccc;
border-radius: 30px;
line-height: 1.25em;
font-weight: 100;
opacity: 0.2;
}
.spinner {
margin: 0;
width: 30px;
text-align: center;
}
.spinner > div {
width: 10px;
height: 10px;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
background: rgba(0,0,0,1);
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0)
}
40% {
-webkit-transform: scale(1.0)
}
}
@keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}<!DOCTYPE html>
<html class="source-bg" lang="en">
<head>
<meta charset="utf-8" />
<!--<script type="text/javascript" src="script.js"></script>-->
<title>Page 2</title>
<!--This is the title to the site-->
<link rel="stylesheet" type='text/css' href='capstone.css'>
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
</head>
<body>
<nav>
<ul class="headul">
<li><a href="page2.html">Learn More</a></li>
<li><a href="page1.html">Infographic</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
<h1 style="float:left;"><strong>Further Reading</strong></h1>
<div class="cssphone2">
<div class="cssscreen">
<div class="phoneicon1" onclick="window.open('https://www.southuniversity.edu/whoweare/newsroom/blog?postID=aaf0df8d-a609-48fd-bd12-1454765a1f94#.W9gMuy0TNZY.twitter','_blank');" style="cursor:pointer;">
<div class="text"><strong>South University Researchers and Affiliates on Mobile Phones' Impact on Society</strong></div>
</div>
<div class="phoneicon2" onclick="window.open('https://mobilebusinessinsights.com/2018/01/future-technology-of-mobile-phones-what-can-you-expect-to-see-at-mobile-world-congress-2018/','_blank');" style="cursor:pointer;">
<div class="text"><strong>Taylor Holland Reporting at Mobile World Congress 2018</strong></div>
</div>
<br>
<div class="phoneicon3" onclick="window.open('https://www.psychologytoday.com/us/blog/artificial-maturity/201409/nomophobia-rising-trend-in-students','_blank');" style="cursor:pointer;">
<div class="text"><strong>Tim Elmore Discussing the Rise in Nomophobia in Students</strong></div>
</div>
<div class="phoneicon4"></div>
<div class="phoneicon5" onclick="window.open('http://www.pewinternet.org/2015/08/26/chapter-1-always-on-connectivity/','_blank');" style="cursor:pointer;">
<div class="text"><strong>Lee Rainie on Society and Mobile Connectivity</strong></div>
</div>
<div class="phoneicon6" onclick="window.open('https://www.webdesignerdepot.com/2009/05/the-evolution-of-cell-phone-design-between-1983-2009/','_blank');" style="cursor:pointer;">
<div class="text"><strong>History and Development of the Cell Phone</strong></div>
</div>
</div>
</div>
<div id="wrapper">
<div class="chat">
<div class="chat-container">
<div class="chat-listcontainer">
<ul class="chat-message-list">
</ul>
</div>
</div>
</div>
</div>
</body>
</html>