CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Luke Thorburn
Luke Thorburn

Reputation: 549

CSS styles not applying immediately when class toggled with jQuery

I am trying to change the style of an element while some javascript is running in the background, to indicate that the page is 'busy' or 'loading'. I've been attempting to do this by toggling a class on at the start of the JS script with jQuery's .toggleClass(), and toggling it off at the end, with some suitable CSS styling attached to the class.

Although the class is toggled immediately, the CSS styling attached to it doesn't apply until after the JS has finished executing, however. So if the class is toggled both on and off, the user does not see any change in style.

I've included a simple example below. How can I force the change in CSS styling to apply immediately, before the rest of the JS code executes?

$(function() {
  $('#box').click(function() {

    // Toggle class 'red' on.
    $(this).toggleClass('red');

    // Do something that takes time.
    for (i = 0; i < 10000; i++) {
      console.log(i);
    }

    // Toggle class 'red' off.
    $(this).toggleClass('red');
  });
});
.wrapper {
  margin: 15px;
  text-align: center;
  color: #000;
}

#box {
  margin: 15px 0;
  width: 100px;
  height: 100px;
  line-height: 100px;
  cursor: pointer;
  background: #ccc;
  border: solid 3px #ccc;
  -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s;
}

#box.red {
  background: #f43059;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="box">Click me.</div>
</div>

Upvotes: 2

Views: 1921

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370769

The problem is that your "something that takes time" is synchronous and blocking - while it's operating, browser repainting will be disabled.

One option would be to listen to a transitionend event, to ensure that the animation to red completes before the resource-intensive operation runs.

So that the removal of .red animates properly too, you could set a setTimeout right after the heavy operations finish. Note that your code will a bit be clearer if you use addClass and removeClass instead of toggleClass:

$('#box').click(function() {
  $(this).one('transitionend', () => {
    // Do something that takes time.
    for (i = 0; i < 1000; i++) {
      console.log(i);
    }
    // Toggle class 'red' off.
    setTimeout(() => {
      $(this).removeClass('red');
    });
  });
  $(this).addClass('red');
});
.wrapper {
  margin: 15px;
  text-align: center;
  color: #000;
}

#box {
  margin: 15px 0;
  width: 100px;
  height: 100px;
  line-height: 100px;
  cursor: pointer;
  background: #ccc;
  border: solid 3px #ccc;
  -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s;
}

#box.red {
  background: #f43059;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="box">Click me.</div>
</div>

Upvotes: 2

Related Questions