jQuery 悬停没有动画但有延迟

Question

我对 jQuery 或 jQuery UI 有疑问。我想在悬停时为按钮设置动画，但它不是平滑地设置动画，而是等待指定的时间，然后立即弹出更改。有什么建议吗？

当我放大 Chrome 时，变化似乎分两步进行。也许是因为变化不大，所以就这样处理了？

$(".btn-form").hover(
        function() {
            $(this).stop().animate(
            {
                borderWidth : "2px",
                borderColor : "#B27332"
            }, 500);
        },
        function() {
            $(this).stop().animate(
            {
                borderWidth : "1px",
                borderColor : "gray"
            }, 500);
        });

Answer 1

您的代码有效！不幸的是，边框从 1px 到 2px 的平滑变化是不可察觉的。

您也可以尝试使用 CSS-transition 获得相同的结果。

.btn-form {
border: 1px solid gray;
transition: border 500ms;
}

.btn-form:hover {
border: 2px solid #B27332;
}