在jquery函数

Question

我的代码有些错误。也许有人可以帮助我。我收到了这个错误：

  

SyntaxError：缺少形式参数：$（this）.css（＆＃34; position＆＃34;，＆＃34; relative＆＃34;）;

＆＃13;

＆＃13;

$(document).keydown(function(e) {
  var count = 0;

  if (e.keyCode == 40) {
    count++;
  }

  if (count == 1) {
    $('#box').animate({
      borderSpacing: -90
    }, {
      step: function(now, fx) {
        $(this).css('-webkit-transform', 'rotate(' + now + ' deg)');
        $(this).css('-moz-transform', 'rotate(' + now + ' deg)');
        $(this).css('transform', 'rotate(' + now + ' deg)');
      },
      duration: 'slow'
    }, 'linear');
  } else {
    $('#box').animate({
      height: '10%'
    }, {
      $(this).css("position", "relative");
      $(this).css("margin-top", "100px");
      $(this).css("width", "30%");
      $(this).css("background-color", "tomato");
      $(this).css("margin-left", "20%");
      $(this).css("align-content", "center");
    });
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <div id="box2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您使用的API方式错误，请使用animate的第二个参数的函数，它将起作用。

请改为尝试：

$('#box').animate({
  height: '10%'
}, function() {
  $(this).css("position", "relative");
  $(this).css("margin-top", "100px");
  $(this).css("width", "30%");
  $(this).css("background-color", "tomato");
  $(this).css("margin-left", "20%");
  $(this).css("align-content", "center");
});

Answer 2

jQuery.fn.animate的最后一个参数应该是一个函数。如果你需要的话。

$(selector).animate({...styles...}, time, easing, function(){ /* callback */})

另外，您可以使用对象同时设置所有css属性。

＆＃13;

＆＃13;

$(this).css({
  position: 'relative',
  marginTop: '100px',
  width: '30%',
  backgroundColor: 'tomato',
  marginLeft: '20%',
  alignContent: 'center'
})

＆＃13;

＆＃13;

＆＃13;