jQuery-動態設置動畫時的高度或寬度

Question

我很好奇如何根據div的動畫時間動態設置高度或寬度。

JQUERY

$(document).ready(function() {
  var div1dimensions = 50 / 180 +'px';  
  $("#div1").animate({
    width: divdimensions,
    height: "100px",
    opacity: 1,
  }, 1500 );
});

我不僅可以創建一個變量並將其放置在寬度或高度的地方嗎？ 還是僅適用於CSS值（例如100px）？

謝謝。

Answer 1

重要的一點是，當使用.css()方法的對象形式時，放置在其中的任何數值固有地都假定為像素值：

$(document).ready(function() {
  var div1dimensions = (50 / 180);  

  $("#div1").animate({
    width: div1dimensions,
    height: 100,
    opacity: 1,
  }, 1500 );
});

請注意缺少引號。 如果以這種方式進行操作，則可以非常輕松地使用變量：

$(document).ready(function() {
  var div1dimensions = (50 / 180),
      divHeight = div1dimensions * 1.5;  

  $("#div1").animate({
    width: divdimensions,
    height: divHeight,
    opacity: 1,
  }, 1500 );
});

或您希望的任何其他變量計算，這只是一個示例。 另外，從jQuery 1.4開始，您可以傳遞用於該計算的函數。 修改了jQuery .css（）文檔中使用的示例以反映您的示例：

$(document).ready(function() {
  var div1dimensions = (50 / 180);  

  $("#div1").animate({
    width: div1dimensions,
    height: function(i){
        return i * 50;
    },
    opacity: 1,
  }, 1500 );
});

那可以很快就變得棘手，實際上僅在非常特定的情況下有用，但是在需要時很方便。