Loop an array to replace DIV class <p>I have a landing page with a full page banner and an enter button central. My problem is, to maintain visibility of the button. I need to change it's class from <code>.dark</code> to <code>.light</code> depending on if the background is a dark one or a light one.</p> <p>I have looked into changing the DIV for a set time that matches my slider and make an array that matches the colour of the background image so the button will change colour according to my array. I also want the transition from changing each DIV to 'if possible' be a fade transition. </p> <p>I know I am at risk of a duplicate post here but I want to stress this question is unique to stack overflow and I cannot find my answers elsewhere.</p> <p>There seems to be plenty of solutions for cycling DIVs but I need to find the one right for my problem.</p> <p>Okay, so from what I have read I have tried this with jQuery:</p> <pre><code>$(window).load(function(){ setTimeout( function(){ $('#one').replaceWith($('#two')); $('#two').show(); }, 10000 ); }); </code></pre> <p>I do not know how to move this into an array or add the transition, AND.. I believe this may just replace with a separate DIV, rather than just replacing the class in my DIV.</p> <p>I have also looked at this:</p> <pre><code>$(document).ready(function(){ window.setTimeout(function(){ $(".one").replaceClass(".two"); },100); }); </code></pre> <p>However, this doesn't seem to operate and I am unsure as to how to fix? Can someone offer me a hand to solve this puzzle I am having.</p> <p>EDIT:</p> <pre><code>&lt;div class="door"&gt; &lt;img src="img/logo-inv.png"&gt; &lt;br&gt; &lt;a href="#" class="btn btn-dark"&gt;ENTER&lt;/a&gt; &lt;/div&gt; </code></pre> <p>I've simplified the code to avoid confusion. The tag I would like to change is "btn-dark".</p>