我在我的網頁上創建了三個形狀（圓圈），它們使用 CSS 中的 z-index 定位在頁面上其他元素的背景中，并且位置是絕對的。
我正在嘗試在我的頁面加載后立即在我的頁面上移動它們。
以下是我嘗試執行上述操作而撰寫的代碼。我不確定我做錯了什么。將不勝感激。
$(function() {
$("shape-1").animate({
"margin-top": " = 200px"
}, 2000);
$("shape-2").animate({
"margin-right": " = 200px"
}, 2000);
$("shape-3").animate({
"margin-bottom": " = 200px"
}, 2000);
});.shape-1,
.shape-2,
.shape-3 {
position: absolute;
border-radius: 50%;
background: linear-gradient(to right bottom, rgba(197, 96, 223, 0.904), rgba(255, 255, 255, 0.37));
z-index: 1;
}
.shape-1 {
top: 1%;
left: 13%;
height: 3rem;
width: 3rem;
}
.shape-2 {
top: 21%;
right: 17%;
height: 6rem;
width: 6rem;
}
.shape-3 {
width: 10rem;
height: 10rem;
bottom: 25%;
left: 40%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shape-1"></div>
<div class="shape-2"></div>
<div class="shape-3"></div>uj5u.com熱心網友回復：
- 您需要使用適當的 CSS 選擇器來選擇元素。
$("shape-1")什么都不選，$(".shape-1")做。 - 您需要為確定元素位置的屬性設定影片。影片
margin-bottom不會為你做任何事。該元件通過固定到位top，bottom，left，和right。你需要影片那些。 - 您需要決定是使用百分比（如您的 CSS 定義）還是像素（如您的 JS 代碼嘗試）來定位元素。你不能同時使用兩者。
- 您需要將百分比影片化為絕對值，您不能這樣做
= 50%。您可以將元素從其原始絕對位置（例如1%）影片到新的絕對位置（例如50%）。
$(function() {
$(".shape-1").animate({top: "50%", left: "50%"}, 2000);
$(".shape-2").animate({right: "50%"}, 2000);
$(".shape-3").animate({bottom: "10%"}, 2000);
});.shape-1,
.shape-2,
.shape-3 {
position: absolute;
border-radius: 50%;
background: linear-gradient(to right bottom, rgba(197, 96, 223, 0.904), rgba(255, 255, 255, 0.37));
z-index: 1;
}
.shape-1 {
top: 1%;
left: 13%;
height: 3rem;
width: 3rem;
}
.shape-2 {
top: 21%;
right: 17%;
height: 6rem;
width: 6rem;
}
.shape-3 {
width: 10rem;
height: 10rem;
bottom: 25%;
left: 40%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shape-1"></div>
<div class="shape-2"></div>
<div class="shape-3"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/388527.html
標籤：javascript 查询 css
下一篇：基于唯一值計數的JS物件過濾器