Mit setTimeout vorübergehend div Hintergrundfarbe ändern

Ich versuche, einen Effekt zu erstellen, der durch jede der vier divs Schleifen und ändert ihre Farbe auf grün, bevor Sie es wieder auf das Original und zum nächsten wechseln. Im Moment ändert es nur permanent die Farben. Ich bin mir nicht sicher, wie ich das beheben soll, so dass die Farbe zurück wechselt, bevor ich zum nächsten übergehe, weil ich jedes vorherige Element "lösche", um es richtig zu loopen. Ich mache wahrscheinlich sieben Dinge falsch und würde mich über jeden Rat freuen.Mit setTimeout vorübergehend div Hintergrundfarbe ändern

Hier ist ein Arbeits JSBin: https://jsbin.com/puricazuxa/4/edit?html,css,js,output

Javascript:

arrayCount=[1,2,3,4]; 
var secondPrint = function(){ 
    setTimeout(function(){ 
if (arrayCount.length>0){ 
     $("#button"+arrayCount[0]).attr("class", "sButton2"); 

    arrayCount.shift(1); 
    secondPrint(); 
    } 
} ,1000); 
    }; 

secondPrint();

CSS:

body { 
    background-color: rgb(200,200,200); 
    font-family: "Arial"; 

} 
.sButton{ 
    height: 50px; 
    width: 50px; 
    margin: 5px; 
    padding: 10px; 
    border: 2px solid black; 
    display:inline; 
    background-color: rgb(50,100,100); 
} 
.sButton2{ 
    height: 50px; 
    width: 50px; 
    margin: 5px; 
    padding: 10px; 
    border: 2px solid black; 
    display:inline; 
    background-color: rgb(100,200,100); 
}

HTML:

<head> 
<script src="https://code.jquery.com/jquery-3.0.0.js"></script> 


</head> 
<body> 
<!-- Main page placeholders --> 

<br/> 
<br/> 
<div class = "sButton" id="button1">1</div> 
<div class = "sButton" id="button2">2</div> 
<div class = "sButton" id="button3">3</div> 
<div class = "sButton" id="button4">4</div>

Quelle

2016-07-10 garson

Tipps: 1) nicht impliziten Globals verwenden (ohne 'var'). 2) Ein Element kann mehr als eine Klasse haben, also sollten Sie in jQuery anstelle von 'attr ('class')' 'addClass' und' removeClass' verwenden; Sie sollten auch Ihr CSS ändern, um dies zu nutzen und Wiederholungen zu vermeiden. – gcampbell

Danke für die Tipps! Ich hatte AddClass und RemoveClass vergessen. Schätze es – garson

Ihre Logik ist hier ein wenig fehlerhaft. Ein besserer Ansatz wäre es, setInterval() zu verwenden, um den Status der Schaltflächen in jeder Sekunde zu aktualisieren und bei jedem Aufruf der Funktion zum nächsten zu wechseln. Versuchen Sie folgendes:

var secondPrint = function() { 
    var $buttons = $('.sButton'); 
    var $active = $buttons.filter('.sButton2'); 
    $active = (!$active.length || $active.is(':last')) ? $('.sButton:first') : $active.next(); 
    $buttons.removeClass('sButton2'); 
    $active.addClass('sButton2'); 
}; 

setInterval(secondPrint, 1000) 
secondPrint();

Example fiddle

wie kann ich es nach einer Iteration stoppen durch sie alle? Ich hatte nicht setInterval() verwendet, weil ich es nicht wollte für immer gehen auf

In diesem Fall müssen Sie nur die Logik Prüfung ändern das Intervall zu löschen, wenn die :last Zustand Hits, wie folgt aus:

var interval; 
var secondPrint = function() { 
    var $buttons = $('.sButton'); 
    var $active = $buttons.filter('.sButton2'); 
    $buttons.removeClass('sButton2'); 
    if ($active.is(':last')) { 
     clearInterval(interval); 
     return; 
    } 

    $active = !$active.length ? $('.sButton:first') : $active.next(); 
    $active.addClass('sButton2'); 
}; 

interval = setInterval(secondPrint, 1000) 
secondPrint();

Updated fiddle

Quelle

2016-07-10 16:28:44

Das ist großartig, aber wie mache ich es nach einer Iteration durch sie alle zu stoppen? Ich hatte setInterval() nicht benutzt, weil ich nicht wollte, dass es für immer weiterging. – garson

Nevermind, ich habe es mit clearInterval() herausgefunden. Vielen Dank! – garson

Kein Problem, froh zu helfen. Ich habe trotzdem meine Antwort für dich aktualisiert –

Mit setTimeout vorübergehend div Hintergrundfarbe ändern

Antwort

Verwandte Themen