如何为这个javascript函数设置动画？

Question

我有一个函数，如果我单击一个名为“ bokse1”的div框，则在这种情况下，将删除另一个名为“ Whole”的框的边距，在这种情况下为50px。我想动画消除边缘。

这是函数：

<outputEntry id="LiteralExpression_01gq7wg">
      <text>"execPerl(profile, \"\"\"#Test . $sum=0;    print \"$sum\");\"\"\", logStd, logErr);"</text>
</outputEntry>

我希望动画是线性的，所以可以说是1秒钟。

这是一个小提琴：http://jsfiddle.net/1cybw0ez/

Answer 1

您可以使用.animate（）代替.css（）

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

您可以详细了解here

Answer 2

您还可以使用css's transition通过CSS设置动画