快速更改css屬性值？

Question

我的示例代碼：

<div></div> 
<button> 
Go 
</button> 

div { 
    width: 50px; 
    height: 50px; 
    border: 1px solid #ccc; 
} 

var bgs = ['red', 'blue', 'yellow', 'green', 'black']; 
$('button').click(function() { 
    for (var i = 0; i < bgs.length; i++) { 
    $('div').css('background-color', bgs[i]); 
    } 
}); 

https://jsfiddle.net/e4jhwtyc/2/

我想實現的是，當用戶點擊Go按鈕，用戶就可以看到背景的紅色，藍色，黃色的變化非常快，綠色，然後是黑色。 但是當Go按鈕被點擊時，我得到的只是黑色。 我錯過了什麼嗎？

Answer 1

您需要設置一些超時以查看顏色變化，否則會發生得太快。

var bgs = ['red', 'blue', 'yellow', 'green', 'black']; 
$('button').click(function() { 
    for (var i = 0; i < bgs.length; i++) { 
    setTimeout(function(){ 
     $('div').css('background-color','').css('background-color', bgs[i]); 
    }, 1000); 
    } 
}); 

Answer 2

您可以使用setInterval()來改變的時間（0.3秒爲例），否則將與您的代碼瞬間改變一段時間顏色。而當它到達數組的最後一個元素，你可以clearInterval()和重置計數器i

var bgs = ['red', 'blue', 'yellow', 'green', 'black']; 
 

 
var i = 0; 
 
$('button').click(function() { 
 
    var x = setInterval(function() { 
 
    if (i < bgs.length) { 
 
     $('div').css('background-color', bgs[i++]); 
 
    } else { 
 
     clearInterval(x); 
 
     i = 0; 
 
    } 
 
    }, 300) 
 
});

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid #ccc; 
 
}

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

Answer 3

每次有是在黑色端click事件。所以它變黑了！如果您將其與瀏覽器渲染進行比較，則for會更快，所以其他顏色不會呈現。 嘗試的setTimeout（）函數用不同的每種顏色的

Answer 4

此版本不與 「setTimeout的」 和 「的setInterval」

var bgs = ['red', 'blue', 'yellow', 'green', 'black']; 
 
function *getBgs(){ 
 
    for(let v of bgs) { 
 
    yield v; 
 
    } 
 
} 
 

 
$('button').click(function() { 
 
    let iter = getBgs(); 
 
    let $div = $('div'); 
 
    var delay = 150; 
 
    var prev = 0; 
 
    (function nextColor(){ 
 
    requestAnimationFrame(function(t){ 
 
     if(prev && t - prev < delay) { 
 
     return nextColor(); 
 
     } 
 
     prev = t; 
 
     let next = iter.next(); 
 
     if(next.done) return; 
 
     $div.css('background-color', next.value); 
 
     nextColor(); 
 
    }); 
 
    })(); 
 
    
 
});

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid #ccc; 
 
}

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

偏移處理