jquery，为什么这个方法上的赋值不起作用？

Question

我尝试将“{transform: 'translateX(5px)'}”分配给一个变量（称为 'aa'）。为了在每次触发 keydown 功能时添加移动的像素值。但这是行不通的。为什么？

我试过这样的方法：css() 方法和 offset() 方法，它们都可以工作，但是为什么这个 animate() 方法不起作用？

<!DOCTYPE html>
<html>

<head>
<style>
    div.divx {
        width: 50px;
        height: 50px;
        background-color: black;
        position: absolute;
        left: 15px;
        top: 15px;
        z-index: -1;
    }
</style>
</head>

<body>
<div class="divx"></div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        var i = 0;
        $(window).keydown(function(e) {

            if (e.which == 39) { //39 is right button
                i += 5;
                a = i + 'px';
                yy = 'translateX(' + a + ')';
                xx = '"' + yy + '"';
                aa = "{transform: " + xx + "}";
                alert(aa);
                $(".divx").animate(aa);
            }
        })

    })
</script>
</body>

</html>

Answer 1

aa 似乎是 String ，.animate() 期望 Object

but it work on alert..

是的，提醒 String。尝试使用 css transition ，将字符串传递给 .css()

<!DOCTYPE html>
<html>

<head>
  <style>
    div.divx {
      width: 50px;
      height: 50px;
      background-color: black;
      position: absolute;
      left: 15px;
      top: 15px;
      z-index: -1;
      transition: transform 500ms;
    }
  </style>
</head>
<body>
  <div class="divx"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
  </script>
  <script>
    $(document).ready(function() {
      var i = 0, a, yy, aa;
      $(window).keydown(function(e) {
        if (e.which == 39) { //39 is right button
          i += 5;
          a = i + 'px';
          yy = 'translateX(' + a + ')';
          aa = "transform," + yy;
          $(".divx").css("transform", yy);
        }
      })
    })
  </script>
</body>

</html>

jquery，为什么这个方法上的赋值不起作用？

jquery, Why this assignment on method didn't work?

jquery

alignment