CODEWITHSUNDEEP
jqueryhtmlbackground-color
sharkyenergy
sharkyenergy

Reputation: 4173

Change background-color of div for some time and then go back to previous

I have a page with many divs. I would need to change the backcolor of a defined set of divs for a given time. The set is defined by the class it has, for example

<div id="A00010002-1" class="playerbox winner ITTTI00582" style="background-color: ......>

The class in this case is ITTTI00582. there will be a few other divs on the page that share this same class. This Class is generated on Runtime, thus it is not backed in the CSS file.

I would need to color all the divs with this class within a function, and then revert the color to whatever it was before. This did not work:

$('.' + idclass).css('background-color', '#FFFF00');

Also, once I assign the color, how can I delete the assignment?

Upvotes: 1

Views: 1676

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You can use setTimeout() to execute some code after a given delay. Try this:

var $elements = $('.' + idclass).addClass('highlight');
setTimeout(function() {
    $elements.removeClass('highlight')
}, 5000); // 5000ms = 5 seconds

Note the use of addClass() and removeClass() here. It's better practice as it separates the styling logic from the JS code, and makes it easier to reset the element to its original state when the class is removed.

Here's a working example:

var idclass = 'ITTTI00582';

var $elements = $('.' + idclass).addClass('highlight');
setTimeout(function() {
  $elements.removeClass('highlight')
}, 5000); // 5000ms = 5 seconds
.playerbox.winner { background-color: grey; }
.playerbox.winner.highlight { background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A00010002-1" class="playerbox winner ITTTI00581">ITTTI00581</div>
<div id="A00010002-1" class="playerbox winner ITTTI00582">ITTTI00582</div>
<div id="A00010002-1" class="playerbox winner ITTTI00583">ITTTI00583</div>
<div id="A00010002-1" class="playerbox winner ITTTI00584">ITTTI00584</div>

Upvotes: 5

Related Questions