檢查div的餘量比每隔一秒移動一次

div應該移動9次並且應該停止。問題是它只移動一次。任何人有解決這個問題的想法？由於檢查div的餘量比每隔一秒移動一次

$(document).ready(function(){ 
 
\t \t var id=1; 
 
\t \t setInterval(move,1000); 
 
\t \t function move(){ 
 
\t \t \t if($(".block").css("margin-left") < "100px"){ 
 
\t \t \t \t $(".block").animate({marginLeft: "+=10px"}); 
 

 
\t \t \t } 
 

 
\t \t } 
 
\t });

.block{ 
 
\t padding: 15px; 
 
    background-color: orange; 
 
    float: left; 
 
    box-shadow: 0px 2px 2px #b1b1b1; 
 
    display: block; 
 
    margin-left: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="block"></block>

來源

2016-06-11 Rifet Gazdić

1.沒有循環9次，只執行一次。即使你會循環，你的if語句被限制爲100px，所以什麼都不會發生。 –

我正在循環它，'setInterval（move，1000）;' –

"Npx" < "100px"將無法正常工作。 這些是絃樂！

您應該使用parseInt()將一些margin-left字符串轉換爲數字，並且您可以使用< 100進行比較。
此外，您不需要setInterval()，使用.animate()回調記得你move功能

$(document).ready(function(){ 
 
     
 
    (function move(){ 
 
    if(parseInt($(".block").css("margin-left"), 10) < 100) { 
 
     $(".block").delay(1000).animate({marginLeft: "+=10px"}, move); 
 
    } 
 
    }()); 
 
    
 
});

.block{ 
 
    padding: 15px; 
 
    background-color: orange; 
 
    float: left; 
 
    box-shadow: 0px 2px 2px #b1b1b1; 
 
    margin-left: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="block"></block>

PS：它會移到10倍:)

來源

2016-06-11 15:26:36

檢查div的餘量比每隔一秒移動一次

回答

相關問題