0

我很好奇如何根据 div 的动画时间动态设置高度或宽度。

查询

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

我可以不只是创建一个变量并将其放置在宽度或高度所在的位置吗？还是仅适用于 CSS 值，例如 100px？

谢谢你。

4

1 回答 1

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

这可能很快就会变得棘手，并且实际上仅在非常特定的情况下才有用，但在需要时很方便。

于 2013-11-13T17:51:29.447 回答