jQuery highlighting not working on a bootstrap v4 button

Question

I am trying to highlight the text of a button when another button is clicked.

An oversimplified version of my html would look like this :

$(".abth").click(function(e) {
  var btnid = '#'.concat($(this).text());
  var divPosition = $(btnid).offset();
  console.log(btnid);
  $('html, body').animate({scrollTop: divPosition.top}, "slow"); //this is working
  $(btnid).effect("highlight", {color: "#FFFFFF"}, 5000);
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" />


<li class="page-item abth"><a class="page-link" href="#">A</a></li>
<button type="button" id="A" class="btn btn-secondary alphabutton">A</button>

The problem is that the jquery highlighting will work on a regular button, but in this case it will not work as my button is a bootstrap button. Any clues how to make the highlighting work on a bootstrap button?

P.S. My bootstrap version is 4.0. Apparently my code will work with earlier versions of Bootstrap.

Answer 1

I noticed that the .btn class has a transition set by bootstrap, so in a completely random attempt to debug this, I tried setting transition: none thinking that maybe the transition was interfering with the jQueryUI calculations, and everything worked. You probably don't want to disable the bootstrap transitions all the time, but what you can do is add a class (that sets transition: none;) right before the highlight effect, and then remove that class after the .effect() has completed. The code would look like the following:

var $transition = null;
$(".abth").click(function(e){
  var btnid='#'.concat($(this).text());
  console.log(btnid);
  var $btn = $(btnid);
  var divPosition = $btn.offset();
  $('html, body').animate({scrollTop: divPosition.top}, "slow");//this is working
  if ($transition !== null) {
    // if button is pressed before previous animation is completed, stop the animation 
    // immediately before starting another one to prevent issues
    $transition.stop(false, true);
  }
  $btn.addClass("no-transition");
  $transition = $btn.effect( "highlight", {color:"#FFFFFF"}, 5000, function () {
    $btn.removeClass("no-transition");
    $transition = null;
  });
});

.no-transition {
  transition: none !important;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" />


<li class="page-item abth"><a class="page-link" href="#">A</a></li>
<button type="button" id="A" class="btn btn-secondary alphabutton">A</button>