在 jquery 函数中应用 css 属性

Question

I have some errors with my code. Maybe someone could help me. I am getting this error:

SyntaxError: missing formal parameter: $(this).css("position" , "relative");

 $(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"); }); } });

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

Answer 1

You are using the API the wrong way, use a function for the second argument of animate and it will work.

Try this instead:

$('#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

the last argument of jQuery.fn.animate should be a function. if you require one.

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

Also as an aside you can set all your css properties at the same time using an object.

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