jQuery toggleClass example

Toggle class name on click in jQuery

by Sascha

HTML

<img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" 
  class="progress flipper" height="80">

CSS

@keyframes go-left-right {
  from {
    left: 0;
  }

  to {
    left: calc(100%);
  }
}

@keyframes image-flip {
  0% {
    transform: scaleX(1);
  }
  90% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(-1);
  }
  
}

.progress {
  animation: go-left-right 8s infinite alternate;
  top: 0;
  position: absolute;
}

.flipper {
  animation-name: image-flip;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

JavaScript

function makeNewPosition() {
  var h = $(window).height() - 25;
  var w = $(window).width() - 25;

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

  return [nh, nw];
}

function animateDiv(myclass) {
  var newq = makeNewPosition();
  $(myclass).animate({
    top: newq[0],
    left: newq[1]
  }, 3000, function() {
    animateDiv(myclass);
  });
}

animateDiv('.progress');