Reputation: 3
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
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
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
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