How to do a transform scale animation with jQuery?

Question

I\'m trying achieve and \"opening-window\" animation, I tried the following:

import $ from \'jquery\'

export const fade = {
  css: false,
  enter: function          


        

Answer 1

Of course that css transition is much better then jQuery animate.

Here is a generic example of how animate transform with jQuery.

The trick is to set unaffected css property (like border-spacing) and "animate" it. Then, you can use the step callback to create your own animation effect.

$('button').click(function() {
  $('div').css('borderSpacing', 1).animate(
    {
      borderSpacing: 1.3
    },
    {
    step: function(now,fx) {
      $(this).css('transform','scale('+now+')');  
    },
    duration:'slow'
  });
});

div {
  width:150px;
  height:150px;
  background:green;
}

Animate