user1775888 user1775888 - 1 year ago 95
jQuery Question

How to make rotate to 45 deg and animate change left same time?

How to make in duration rotate angle to 45 deg and stop?
I can't find the way make

in below demo increase to 45 during animate change margin-left,
how to do it??

var angle = 0;

$("#a").animate ({
"margin-left": "+=200px"
step: function (now, fx) {
angle += 1;
duration: 300 }, "linear");

Answer Source

There is no reason to increment the rotation each step as you can use .animate and give it a target value and it will automatically step to that value (and fluently)

If I were doing this, I would use .css and CSS transitions as it performs much better than jQuery's transform. That would look like the following

  $("#a").css ({
    "-moz-transform":"translateX(200px) rotate(45deg)",
    "-webkit-transform":"translateX(200px) rotate(45deg)",
    "-ms-transform":"translateX(200px) rotate(45deg)",
    "transform":"translateX(200px) rotate(45deg)"
#a {
  width: 150px;
  height: 150px;
  list-style: none;
  background-color: blue;
  -webkit-transition:.3s linear;
  -moz-transition:.3s linear;
  -ms-transition:.3s linear;
  transition:.3s linear;
<script src=""></script>
<div class="btn">btn</div>
  <li id="a">

For performance I would recommend using vanilla javascript for this as well

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download