jQuery addClass example

Change class name on click in jQuery

by Dhanck

HTML

<div id="compare">
  <img id = "img1" src = "https://technologyadvice.com/wp-content/uploads/2015/02/compare-crms-like-a-pro-01.png" alt="Original Ima">
  <img id = "img2" src = "https://corepointhealth.com/wp-content/uploads/arm-wrestle.png">
  <div id="slider">

  </div>
</div>

CSS

#compare{
  margin:15px;
}
#img1, #img2{
  position:absolute;
}
#slider{
    margin-top: 180px;
    position: absolute;
    left: 36px;
}
.ui-widget-content{
  background:transparent;
  border:none;
}
.ui-widget-header {
    background: transparent;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: none;
    background: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDcgMjQ3Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzQyNDI0Mjt9LmNscy0ye2ZpbGw6I2ZmZjtmaWxsLXJ1bGU6ZXZlbm9kZDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmRyYWctcmVzaXplPC90aXRsZT48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjEyMy41IiBjeT0iMTIzLjUiIHI9IjEyMy41Ii8+PGcgaWQ9InRyaWFuZ2xlLWxlZnQiPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTMwMC40MiwxOTQuMWwzNy0zN2MyLjkxLTIuOTEsNS4yOS0xLjkyLDUuMjksMi4ydjc0Ljg1YzAsNC4xMS0yLjM4LDUuMS01LjI5LDIuMTlsLTM3LTM3QTMuNzYsMy43NiwwLDAsMSwzMDAuNDIsMTk0LjFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjI5IC03NCkiLz48L2c+PGcgaWQ9InRyaWFuZ2xlLXJpZ2h0Ij48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik00MDQuOTEsMTk5LjM5bC0zNywzN2MtMi45MSwyLjkxLTUuMywxLjkyLTUuMy0yLjE5VjE1OS4zMmMwLTQuMTIsMi4zOS01LjExLDUuMy0yLjJsMzcsMzdBMy43NiwzLjc2LDAsMCwxLDQwNC45MSwxOTkuMzlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjI5IC03NCkiLz48L2c+PC9zdmc+');
    border-radius: 50%;
    height: 50px;
    width: 50px;
}

JavaScript

$( "#slider" ).slider({
        range: "min",
                 value: 0,
                 min: 0,
                 max: 10,

                 slide: function (event, ui) {
                     var r = (ui.value); 
                     $("#img1").css({'opacity':r/10});
                     $("#img2").css({'opacity':1-(r/10)});
				}   
    });

$('#slider').width(($('#img1').width() / 1.09))