使用.animate移動css形狀

我想用css，jquery和html爲學校製作圖形化演示文稿，我需要一個矩形移動屏幕。我已經做了一些研究，並且嘗試過使用animate函數的幾個變體，但它不能解決問題，它只能位於窗口的左側。使用.animate移動css形狀

這裏是我的代碼，以供參考：

var derp = 20; 
 
function scroll() { 
 
    var scrollLeft = Math.floor(Math.random() * 100); 
 
    $('#rectangle').animate({ 
 
    left: scrollLeft "px", 
 
    }, derp, function() { 
 
    scroll(); 
 
    }); 
 
} 
 

 
setInterval(100, scroll());

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
body { 
 
    background-image: url("background.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-position: right top; 
 
    background-size: cover; 
 
} 
 

 
.rectangle { 
 
    width: 20px; 
 
    height: 100%; 
 
    background: black; 
 
} 
 

 
#rectangle { 
 
    left: 10px; 
 
    position: absolute; 
 
} 
 

 
img, 
 
div, 
 
p, 
 
body { 
 
    margin: 0px; 
 
    padding 0px; 
 
}

<div class="rectangle"></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

來源

2017-06-14 V3ngence91

我想我可能有一些遺漏涉及jQuery的，但林不知道 – V3ngence91

你一個語法錯誤，我可以看到。檢查您的瀏覽器的開發控制檯（按F12，然後單擊「控制檯」）以查看它所在的線路。此外，不是一個語法錯誤，而是一個邏輯錯誤，行'setInterval（100，scroll（））;'應該是'setInterval（scroll，100）;'，即函數*名稱*第一（後面沒有括號）， *然後*毫秒的延遲。而且，從'.animate（）'完成回調*中調用'scroll（）'也是沒有意義的，正如使用'setInterval（）'一樣。 – nnnnnn

你可以只用CSS做到這一點。

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    position: relative; 
 
    animation: anim 3s forwards alternate; 
 
    animation-iteration-count: 6; 
 
} 
 

 
@keyframes anim { 
 
    from { 
 
    left: 0px; 
 
    } 
 
    to { 
 
    left: 200px 
 
    } 
 
}

<div></div>

來源

2017-06-14 03:50:26 Gerard

但是，OP有'Math.floor（Math.random（）* 100）'這個新的位置...... – nnnnnn

這就是看它是否會移動@nnnnnn – V3ngence91

@ V3ngence91 - 我們可以做出有根據的猜測，但我們可以沒有讀懂你的思想，所以認爲你包含'.random（）'代碼並不是不合理的，因爲你實際上需要一個隨機移動。如果這只是爲了測試，你應該編輯你的問題以清楚地說明（也許在這一點上對代碼添加註釋），然後清楚地解釋你實際上想要的。 – nnnnnn

使用.animate移動css形狀

回答

相關問題