How to scale (jQuery)?

Question

I'd like to create a scale animation on an element using jQuery animations.

So there is a element given with the property transform: "scale(0.5)" and I'd like to animate this scaleFactor of "scale(0.5)" to another specific value like e.g "scale(1.2)" or "scale(0.3)".

How can I achieve this?

Note: I'd like to use just jQuery, no CSS transition styles, etc

Note: This is the code I got so far. Obviously it is not working this way to animate a scale like 1.4 to another scale like 0.5 and the second problem is that the animations just runs one time.

$("input").click(function() {
  $(".elem").css({
    transform: 'scale(1)'
  }).animate({
    new_scale: 1.2
  }, {
    step: function(value) {
      $(".elem").css({
        transform: 'scale(' + value + ')'
      });
    },
    duration: 1000
  });

})

.elem {
  background: red;
  width: 40px;
  height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="elem"></div>
<input type="button" value="animation" style="margin-top: 10px" />

So any help how to fix this or even some better solutions would be very appreciated. Thanks a million In advance!

Answer 1

No jQuery required.

Just use CSS transition: transform;

document.getElementById('clickme').onclick = function() {
  var target = Math.random()+0.5; // for testing, give a random value between 0.5 and 1.5
  document.getElementById('elem').style.transform = "scale("+target+")";
};

#elem {
  background: red;
  width: 40px;
  height: 40px;
  transition: transform 1s linear;
}

<div id="elem"></div>
<input type="button" id="clickme" value="animation" style="margin-top: 10px" />