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 );
});

那可以很快就变得棘手，实际上仅在非常特定的情况下有用，但是在需要时很方便。