I am trying to assign a random background color to each div with a class of "random-color". The code snippet that generates the random color using jQuery is functioning correctly, but there is an issue where the color disappears after 2 seconds. Here's the code snippet I have used: You can find the script from this post Random Div Color. Please help me fix this problem.
var colors = ['red', 'green', 'blue', 'orange', 'yellow'];
$(document).ready(function() {
$(".random-color").each(function() {
$(this).css('background-color', colors[Math.floor(Math.random() * colors.length)]);
});
});
window.sr = new scrollReveal();div {
height: 40px;
padding: 10px;
text-align: center;
margin-bottom: 10px;
}
#d1 {
background-color: #00A388;
}
#d2 {
background-color: #FFFF9D;
}
#d3 {
background-color: #BEEB9F;
}
#d4 {
background-color: #79BD8F;
}<script src="http://scrollrevealjs.org/js/scrollReveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<p data-sr>Scroll Reveal-Default</p>
<!--Enter Properties The enter keyword controls the vector origin (direction) of your animation.-->
<!-- Reveal with a downward motion -->
<div class="random-color" data-sr='enter top'>enter top</div>
<br>
<!-- The other accepted values... -->
<div class="random-color" data-sr='enter left'>enter lef</div>
<br>
<div class="random-color" data-sr='enter right'>enter right</div>
<br>
<div class="random-color" data-sr='enter bottom'>enter bottom</div>
<br>
<!--Enter Properties Ends-->
<!--Move Properties The move keyword controls the distance (in pixels) traveled during animation.-->
<div class="random-color" data-sr='move 24px'>move 24px</div>
<!--Enter Properties Ends-->
Over The over keyword sets the duration (in seconds) of your animation.
<div class="random-color" data-sr='over 0.6s'>over 0.6s</div>
<div class="random-color" data-sr='over 1.3s'>over 1.3s</div>
Flip The flip keyword is a rotation keyword, controlling rotation along the X axis (pitch).
<div class="d1" data-sr="enter left, hustle 20px">enter left, hustle 20px</div>
<div class="d2" data-sr="wait 2.5s, ease-in-out 100px">wait 2.5s, ease-in-out 100px</div>
<div class="d3" data-sr="move 16px scale up 20%, over 2s">move 16px scale up 20%, over 2s</div>
<div class="d4" data-sr="enter bottom, roll 45deg, over 2s">enter bottom, roll 45deg, over 2s</div>
</body>
</html>