-6
我正在嘗試製作一個網站。這是我的JQuery，CSS和我的HTML的一部分：JQuery和HTML不起作用
var featureDisplay;
var featureUnderline;
var features = [
"comprehensive moderation", "utility commands", "music commands", "fun commands", "game integrations", "social system"
];
var featureID = 0;
function updateFeature() {
var pushinFeatureDisplay = featureDisplay.clone();
pushinFeatureDisplay.appendTo(featureDisplay.parent());
pushinFeatureDisplay.text(features[featureID]);
pushinFeatureDisplay.css("opacity", 0);
pushinFeatureDisplay.css("margin-left", -pushinFeatureDisplay.width());
pushinFeatureDisplay.animate({
opacity: 1,
marginLeft: -(pushinFeatureDisplay.width() * 0.5)
}, 1000);
var oldFeatureUnderline = featureUnderline.clone();
oldFeatureUnderline.prependTo(featureUnderline.parent());
oldFeatureUnderline.animate({
width: 0
}, 1000);
featureUnderline.prependTo($(".feature-box")[featureID]);
featureUnderline.css("width", 0);
featureUnderline.animate({
width: featureUnderline.parent().find(".feature-title").first().innerWidth()
}, 1000);
featureDisplay.animate({
opacity: 0,
marginLeft: (pushinFeatureDisplay.width() * 0.25)
}, 1000, function() {
featureDisplay.text(features[featureID++]);
if (featureID >= features.length) featureID = 0;
featureDisplay.css("opacity", 1);
featureDisplay.css("margin-left", -(pushinFeatureDisplay.width() * 0.5));
pushinFeatureDisplay.remove();
oldFeatureUnderline.remove();
});
}
$(document).ready(function() {
alert("I did the thing!");
featureDisplay = $("#feature-display");
featureUnderline = $("<div class='feature-underline'></div>");
setTimeout(updateFeature, 1000);
setInterval(updateFeature, 2500);
});h4 {
margin-top: 4px;
margin-bottom: 4px;
color: #00cc99;
font-size: 24px;
font-weight: 400;
}
.large-text {
font-size: 48px;
font-weight: 300;
}
.information-main {
width: 66%;
margin: auto;
text-align: center;
}
.bot-avatar {
border-radius: 100%;
margin: auto;
display: block;
width: 256px;
height: 256px;
}
.button-panel {
text-align: center;
}
.button-panel a {
background-color: #fafafa;
border: 2px solid #00cc99;
color: #00cc99;
font-weight: 400;
font-size: 20px;
padding: 8px;
margin: 8px;
text-transform: uppercase;
text-decoration: none;
transition: background-color 500ms, color 500ms;
}
.button-panel a:hover {
background-color: #00cc99;
color: #fafafa;
cursor: pointer;
}
.feature-display {
color: #00cc99;
position: absolute;
}
.feature-row {
margin-top: 16px;
margin-bottom: 16px;
box-sizing: border-box;
display: table;
content: " ";
}
.feature-box {
width: 33%;
padding-left: 8px;
padding-right: 8px;
float: left;
display: inline-block;
position: relative;
box-sizing: border-box;
}
.feature-title {
margin-top: 4px;
margin-bottom: 4px;
color: #00cc99;
font-size: 24px;
font-weight: 400;
}
.feature-description {
font-weight: 300;
}
.feature-underline {
position: absolute;
width: 0;
height: 2px;
margin-top: 28px;
background-color: #00cc99;
border-radius: 128px;
}<div class="information-main">
<img src="./JARVIS_files/JARVIS.png" class="bot-avatar">
<br>
<span class="large-text">JARVIS is an adaptable, multipurpose bot for Discord. Features include </span>
<br>
<span class="large-text feature-display" id="feature-display" style="opacity: 1; margin-left: -268.5px;">social system</span>
</div>當我在瀏覽器中打開它，我甚至不出現彈出。 我試圖讓這些單詞滑入和滑出。我從Aethex.xyz保存並編輯它。我希望它能像那個網站一樣。即使我下載網站的確切來源並且不對其進行編輯，它仍然不起作用。我是HTML新手，所以如果它是愚蠢的，請不要驚慌。
更新：我已經回來了將近一年後，現在我已經知道我在做什麼，對任何認爲這是一個愚蠢問題（這是:)）的人抱歉。
如果只是運行您的片段在這裏顯示了一個重要的丟失的依賴：jQuery的。 – Serlite
你在使用jQuery嗎？我沒有看到你的進口報表。 .ready（）是一個jQuery函數，需要該庫才能工作。 – Korgrue
Javascript控制檯中是否有任何錯誤？ – Barmar