user1775888 user1775888 - 18 days ago 7
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

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

http://jsfiddle.net/8tP9D/37/

var angle = 0;

$('.btn').click(function(){
$("#a").animate ({
"margin-left": "+=200px"
},
{
step: function (now, fx) {
angle += 1;
$(this).css({
"-moz-transform":"rotate("+angle+"deg)",
"-webkit-transform":"rotate("+angle+"deg)",
"-ms-transform":"rotate("+angle+"deg)",
"-o-transform":"rotate("+angle+"deg)"
});
},
duration: 300 }, "linear");
});

Answer

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

$('.btn').click(function(){
  $("#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 {
  margin-top:25px;
  margin-left:25px;
  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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="btn">btn</div>
<ul>
  <li id="a">
    <span>content</span>
  </li>
</ul>

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