jQuery toggleClass example

Toggle class name on click in jQuery

by Sascha

HTML

<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  background-size: cover;
}

JavaScript

let $img = $('#banner-message');
$('#banner-message p').html("Now loading background image ...");
$img.css('background-image', 'url(https://cdn.hasselblad.com/hasselblad-com/6cb604081ef3086569319ddb5adcae66298a28c5_x1d-ii-sample-01-web.jpg?auto=format&q=97)');

window.setTimeout(function() {
  $.ajax('https://2.img-dpreview.com/files/p/TS1200x900~sample_galleries/9077940471/7146948694.jpg', {
    dataType: 'plain',
    success: function(data) {
			$img.src= "data:image/gif;base64,"+data;
    }
  })
}, 5000);