Ist es möglich, mit Schleifen (für/während)

Question

zu animieren Ich mag den falschen Baum komplett bellen, aber ich bin auf der Suche nach einer Möglichkeit, ein Element auf einer Seite dauerhaft unter Last zu animieren. Ich habe ein bisschen mit For-Loops herumgespielt, aber ich kann es nicht zum Laufen bringen, und While-Loops sind natürlich nur unendlich. Unten ist eine Fiedel von dem, was ich anstrebe, jede Hilfe wäre willkommen!

https://jsfiddle.net/8dL3zvcp/

HTML:

<div class="one"></div> 

JScript:

$("document").ready(function(){ 



for (i = 0; i < 10; i++) { 
    $(".one").css("background-color", "red").delay(2000).css("background-color" ,"blue").delay(2000); 
} 

}); 

Answer 1

ich ein Paar von Klassen verwenden würde, und schalten Sie sie einmal pro gewünschten Intervall wiederholt:

setInterval(function() { 
 
    $(".one").toggleClass("toggle-a toggle-b"); 
 
}, 2000);

.toggle-a { 
 
    background-color: blue; 
 
} 
 
.toggle-b { 
 
    background-color: green; 
 
}

<div class="one toggle-a">This is the div</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Aber wenn Sie wirklich wollen, es mit Inline-Styles zu tun, verfolgen, welche Sie gerade zeigen und wieder wechseln:

var current = ""; 
 
function setBackground() { 
 
    current = current === "blue" ? "green" : "blue"; 
 
    $(".one").css("background-color", current); 
 
} 
 
setBackground(); 
 
setInterval(setBackground, 2000);

<div class="one toggle-a">This is the div</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>