animate vs css - animate无效

Question

我想使用动画效果，但它不起作用

这是有效的

$("#add-widgets").click(function () {
    $("#list-widgets").css({display:"block"});
});

但这不是：

$("#add-widgets").click(function () {
    $("#list-widgets").animate({display:"block"},1000);
});

你能帮帮我吗？ 感谢

Answer 1

您可以使用很多动画。这取决于你想要什么。例如，对于fadeIn，您可以使用：

$("#list-widgets").fadeIn();

Answer 2

您无法为显示属性设置动画，因为这些属性之间没有值。例如，元素可以设置为display:none或任何其他属性，例如display:block，但两者之间没有任何值。如果您要将不透明度从opacity:0设置为opacity:1，那么您可以使用opacity:0.01之间的值，一直到opacity:0.99

Answer 3

如果你只是制作一个从隐藏到阻止的“动画”：

$("#list-widgets").fadeIn();

否则你应该做一个黑客：

• 复制您的列表：

  var tmp = $（“＃list-widgets”）。clone（）;

• 使用css：

  赋予tmp新值

  tmp.css（{显示： “块”}）;

• 保存新的左上角和左上角：

  var newTop = tmp.position（）。top; var newLeft = tmp.position（）。left;

• 最后移动你的元素：

  $（ “＃列表窗口小部件”）。动画（{
    'top'：newTop，
    'left'：newLeft
  }，1000）;