fade in/out highlight to zebra striped table

Question

I have a table with a number of data rows, which is zebra striped using the following CSS:

#datatable tr:nth-child(odd) {
background-color: #fff;
}

#datatable tr:nth-child(even) {
background-color: #fafafa;
}

The data in the table is continually updated via ajax calls, and I want to add a temporary highlight to particular rows where data has changed.

I want this new colour (red if the data value has decreased, green if the data value has increased), to nicely fade in, stay for a second or two, then fade back out to the original row colour again.

I have this working just now using jQuery and CSS;

$('#row_id').addClass("temphighlight");
setTimeout(clearHighlighting, 3000);

function clearHighlighting(){
$("#row_id").removeClass("temphighlight");
}

#datatable tr.temphighlight {
background-color: #c6efce;
transition: background 1.0s ease;
}

This works for the fade in, but after the delay, the CSS class is removed immediately and there is no fade out.

How can I get this highlighting to have a better effect, where it fades in and also fades out?

I have checked several similar SO questions, but the answers either don't work or don't apply - such as suggestions that you animate a fade to white, which doesn't work for me because my rows are alternatively coloured differently due to the row striping.

You can use use `keyframes-animation` to change `background-color` to `#c6efce` on 50% of animation and back to default color on 100%. — fen1x, Nov 15 '17 at 19:25

score 1 · Accepted Answer · answered Nov 15 '17 at 19:26

1

Something like this?

.table{
  border: 1px solid #eee;
}

.table .row{
  padding: 10px;
  box-sizing: border-box;
}

.table .row:nth-child(odd) {
background-color: #fff;
}

.table .row:nth-child(even) {
background-color: #fafafa;
}

.table .row.increased{
  animation: 1s increased;
}

.table .row.decreased{
  animation: 1s decreased;
}

@keyframes increased{
  0%{
    background: initial;
  }
  50%{
    background: #a2ffa9;
  }
  100%{
    background: initial;
  }
}

@keyframes decreased{
  0%{
    background: initial;
  }
  50%{
    background: #ff6f6f;
  }
  100%{
    background: initial;
  }
}

<div class="table">
  <div class="row increased">
  row
  </div>
  <div class="row">
  row
  </div>
  <div class="row">
  row
  </div>
  <div class="row decreased">
  row
  </div>
</div>

answered Nov 15 '17 at 19:26

Kushtrim

1,899
6
14

How would I activate / call this from my jQuery? Just addClass of 'increased' or 'decreased'? – R2D2 Nov 15 '17 at 19:32
@Richard yup, that's it. – Kushtrim Nov 15 '17 at 19:33
@Kushtrim Nice and easy solution. But on the gray rows, it fades all the way to white, and at the end of the animation, it will pop back to gray. Any way to fix that bug? – Stian Jan 28 '19 at 21:08
Actually, if you omit the 100% state, fading on colored rows will be smooth. Check the accepted answer on this question: https://stackoverflow.com/questions/54410559/fading-background-color-on-striped-table – Stian Jan 28 '19 at 21:50
flm Kushtro ! :) – showtime Feb 09 '22 at 13:41

score 1 · Answer 2 · answered Nov 15 '17 at 19:38

Just put the transition on a rule that is not removed from the element.

setTimeout(function() {
  $('#row_id').addClass("temphighlight");
  setTimeout(clearHighlighting, 3000);
}, 2000);

function clearHighlighting() {
  $("#row_id").removeClass("temphighlight");
}

#datatable tr {
  transition: background 2.0s ease;
}

#datatable tr:nth-child(odd) {
  background-color: #fff;
}

#datatable tr:nth-child(even) {
  background-color: #fafafa;
}

#datatable tr.temphighlight {
  background-color: #c6efce;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="datatable">
  <tr>
    <td>One</td>
  </tr>
  <tr>
    <td>Two</td>
  </tr>
  <tr id="row_id">
    <td>Three</td>
  </tr>
  <tr>
    <td>Four</td>
  </tr>
</table>

score 1 · Answer 3 · answered Nov 15 '17 at 19:55

How's this? You can change the class to be added to either pulseUp or pulseDown dependent on if the value is going up or down.

Try clicking an element in the example provided.

$("td").click(function() {
 var element = this;
  $(element).addClass("pulseUp");
  setTimeout(function () {
       $(element).removeClass("pulseUp");
  },500);
});

#datatable tr:nth-child(odd) {
background-color: #fff;
}

#datatable tr:nth-child(even) {
background-color: #fafafa;
}

.pulseUp{
  animation-name: pulseUp;
  animation-duration: 0.5s;
  animation-timing-function: ease;
}

.pulseDown {
  animation-name: pulseDown;
  animation-duration: 0.5s;
  animation-timing-function: ease;
}

@keyframes pulseUp {
  50% {
    background-color: green;
  }
}

@keyframes pulseDown {
  50% {
    background-color: red;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="datatable">
  <tr>
    <td>1</td>
    <td>2</td> 
    <td>3</td>
  </tr>
    <tr>
    <td>hello</td>
    <td>mr</td> 
    <td>Smith</td>
  </tr>
    <tr>
    <td>Goodbye</td>
    <td>Sir</td> 
    <td>Smith</td>
  </tr>
</table>

score 0 · Answer 4 · answered Nov 15 '17 at 20:07

0

you can change opacity

myFunction();
var val = 1.0;
function myFunction() {

val -= 0.02;
    $('.myDiv').css("opacity", val);
    setTimeout(myFunction, 20);
}

https://codepen.io/piscu/pen/LOzNqa

answered Nov 15 '17 at 20:07

piscu

84
7

fade in/out highlight to zebra striped table

4 Answers4