javascript - jQuery highlight effect does not work with Bootstrap's row classes -

i using jquery , bootstrap 3 on site. have table uses bootstrap's table-striped class different colored rows. several of rows have added "danger" class bootstrap show row in red. have several anchors, jump down particular row, , want action have temporary highlight row, user knows row jumping to.

if jumped-to row not have "danger" class added, highlight works fine, if row has danger class, highlight not happen.

here's table (condensed somewhat)

<div class="table-responsive">     <table class="table table-striped table-condensed">     <tr id="11111-row" class="class1 class2 ">       <td><a name="11111">blah</td>       <td><a href="#33333" onclick="flashrow(33333)">33333</a>)</td>     </tr>     <tr id="22222-row" class="class1 class2 ">       <td><a name="22222">blah</td>       <td><a href="#44444" onclick="flashrow(44444)">44444</a>)</td>     </tr>     <tr id="33333-row" class="class1 class2 ">       <td><a name="33333">blah</td>       <td><a href="#77777" onclick="flashrow(77777)">77777</a>)</td>     </tr>     <tr id="44444-row" class="danger class1 class2 ">       <td><a name="44444">blah</td>       <td><a href="#88888" onclick="flashrow(88888)">88888</a>)</td>     </tr>   </table> </div> 

here's flashrow javascript function:

function flashrow(bug_id){   row = $('#'+bug_id+"-row");   row.effect( "highlight", {color:"#669966"}, 10000 )   } 

when click on link in row 11111, jumps row 33333, , row highlighted correctly. when click link in row 22222, jumps row 44444, since row has "danger" class (which makes row have red background), not see highlight.

if use browser inspector, can see in either case, when click on effect still happening, bootstrap "danger" class prevents working.

how work?

https://jsfiddle.net/eyr5ouy9/5/

well "working" in sense javascript modifying style of danger row, danger class modifying background color of row. has specificity of css, , in bootstrap's css imagine find rather specific group of selectors danger row, merely setting style background x (which highlight doing) doesn't suffice override it. remove class duration of highlight effect perhaps? (if using chrome or ff, can watch effect "happening" right clicking element, going inspect, , in elements tab of console watch happens on tr

try this: jsfiddle

function flashrow(bug_id) {   row = $('#' + bug_id + "-row");   var hasdanger = row.hasclass('danger');   var self = this;   row.removeclass('danger')   row.effect("highlight", {     color: "#669966"   }, 1000,   function(){if(hasdanger){row.addclass('danger');}}) }