Add transform speed in Javascript

Question

I would like to add some speed in a transformation that I made with Javascript, but I don't exactly know how..

My Javascript code is

$('#cell1').mouseenter(function(){
    $(this).attr('transform', 'scale(1 1) translate(200, 10)');

And my this class is inside my html code. How should I add some speed?

I tried this

$(this).attr('transition-duration', '3s');

but it doesn't quite work..

Answer 1

There are 3 problems in your code:

1. use $.css() instead of $.attr()
2. separate CSS scale value with a comma
3. add units for translation

This will work:

$(this).css('transform', 'scale(1, 1) translate(200px, 10px)');
$(this).css('transition-duration', '3s');

https://jsfiddle.net/781wuxym/

Answer 2

Use .css() instead of .attr().

Also, you need to ensure that you are using your css functions correctly. For example, you need to make sure translate uses px for the coordinates and that scale is comma separated (if h & w are the same you can just specify 1 unit).

See working example below:

$('#cell1').mouseenter(function() {
  $(this).css({
     "transition-duration": "3s", 
     "transform": "scale(1) translate(200px, 10px)"
  });
});

#cell1 {
  height: 150px;
  width: 150px;
  border: 1px solid red;
  transform: scale(0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cell1"></div>