Javascript 为添加边框设置动画（先增长后收缩）

我试图在不使用jquery以外的任何插件/库的情况下构建一些效果。这样做的目的是，当用户更改框的值时，会出现一个边框，它会增长到8px，然后收缩回0px。现在，我有以下代码外壳：

$('#pastebox').on('input', function() {
    $("#pastebox").css("border", "solid 1px green");
});

我知道我可以用下面的东西制作动画，但我很难让它工作：

$("#pastebox").animate({border-width: '5px'}, 1000);

我知道，如果我能让前一个开始工作，我就可以做如下事情：

$('#pastebox').on('input', function() {
    $("#pastebox").css("border", "solid 1px green");
    $("#pastebox").animate({border-width: '5px'}, 1000);
    $("#pastebox").animate({border-width: '0px'}, 1000);
});

---

我做错了什么？

对象键不能包含减号（

边框宽度）

）-请将其大写或引用：

$（'#粘贴框'）。在（'input'，function（）上{
$（“#粘贴框”）.css（“边框”，“实心1px绿色”）；
$（“#粘贴框”）.animate（{“边框宽度”：“5px”}，1000）；
$（“#粘贴框”）.animate（{“边框宽度”：“0px”}，1000）；
});
对象键不能包含减号（
边框宽度
）-请将其大写或引号括起来：


$（'#粘贴框'）。在（'input'，function（）上{
$（“#粘贴框”）.css（“边框”，“实心1px绿色”）；
$（“#粘贴框”）.animate（{“边框宽度”：“5px”}，1000）；
$（“#粘贴框”）.animate（{“边框宽度”：“0px”}，1000）；
});

这太完美了，我已经让它工作了。不幸的是，这并不是我所希望的效果。有没有关于如何使边框围绕框的外部展开，而框保持相同大小的快速提示？当然，将初始填充设置为5px，然后在向上设置边框动画时将其向下设置动画，反之亦然。这很完美，我已经让它工作了。不幸的是，这并不是我所希望的效果。有没有关于如何使边框围绕框的外部展开，而框保持相同大小的快速提示？当然，请将初始填充设置为5px，然后在向上设置边框动画时将其向下设置动画，反之亦然。