CODEWITHSUNDEEP
jquery
WNM Derek
WNM Derek

Reputation: 3

jquery highlight table row and fade down after a few seconds

Supposing I have a table row 

<tr id="tr_41"><td>stuff in here</td></tr>

And using jquery I add something like

$("#tr_41").addClass("testbg");

testbg is css that just does .testbg { border: 10px solid blue; }

What I want to do i when the blue border is applied to the tr_41 row using $("#tr_41").addClass("testbg"); is fade it down/off to invisible after a few seconds.

It is for highlighting a last inserted or modified table row after an edit action has taken place and the table is reloaded using ajax

Is this possible? I have tried jquery fade but the row just ends up dissapearing!

Upvotes: 0

Views: 2415

Answers (3)

Zenoo
Zenoo

Reputation: 12880

You can use CSS keyframes with the forwards attribute for this :

$('div').on('click',function(){
  var that = $(this);
  that.addClass('clicked');
  
  setTimeout(function(){
    that.removeClass('clicked');
  },2000);
});
div{
  height: 100px;
  width: 100px;
  border: 2px solid black;
}

div.clicked{
  animation: fadeOut 2s forwards;
}

@keyframes fadeOut {
    0%   {border-color: blue;}
    100% {border-color: black;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Upvotes: 1

trk
trk

Reputation: 2228

I think this should work for you: 

$("#tr_41").toggleClass("testbg").fadeOut(400, function() {
        $(this).toggleClass("testbg").fadeIn(0)
})

Please let me know if doesn't. Thanks.

Upvotes: 1

N. Ivanov
N. Ivanov

Reputation: 1823

An easy solution could be, that you add a second class to the tag when you insert the table row. Although the CSS for the second class would have the transition property applied for the border.

Here is an example:

$(function() {
  $("#tr_41").addClass("testbg");
  $("body").on("click", "#tr_41", function() {
    $("#tr_41").addClass("secondclass");
  });
});
.testbg {
  border: 10px solid blue;
}

.secondclass {
  -moz-transition: all 1s ease-in;
  -webkit-transition: all 1s ease-in;
  -o-transition: all 1s ease-in;
  transition: all 1s ease-in;
  border: 10px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="tr_41">
  <td>stuff in here</td>
</span>

In my example the event triggers, when you click on the element.

Hope this helps!

Upvotes: 0

Related Questions