在 jquery 函數中應用 css 屬性

Question

我的代碼有一些錯誤。 也許有人可以幫助我。 我收到此錯誤：

語法錯誤：缺少形式參數：$(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

您以錯誤的方式使用 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 屬性。

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