Question

我试图在不使用除jquery之外的任何插件/库的情况下构建一个小效果。目标是使其在用户更改框的值时显示边框，增长到8px，然后缩小回0px。现在我有以下代码shell：

$('#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） - 要么是camelCase，要么引用它：

$('#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" />

控制台总是有用的。

动画添加边框（增长然后缩小）

1 个答案: