javascript - 动画添加边框(增长然后收缩)

Question

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

我做错了什么？

Answer 1

对象键不能包含减号 (border-width) - 要么是驼峰式，要么是引号:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="pastebox" />

控制台总是有用的。