使用 JQuery 在表单字段上设置 .delay().animate() 方法答案

【问题标题】：Setting a .delay().animate() method on a form field with JQuery使用 JQuery 在表单字段上设置 .delay().animate() 方法
【发布时间】：2023-04-01 17:25:02
【问题描述】：

我的页面只有一个按钮，可以将用户跳转到下面的联系表单，我想简要地突出显示表单中的第一个字段，然后让它动画回预设的焦点背景颜色。似乎使用.css() 方法不允许延迟，而且似乎.animate() 不适用于更改表单字段的属性。有什么建议吗？

$(document).ready(function() { 
    $('#class_sign_up_btn, #work_with_brian_btn').click(function() {
        $('#name').focus();
        $('#name').css('background','#E3BD00').delay(500).animate( {'background':'grey'}, 300);
    });
});

【问题讨论】：

标签： jquery css jquery-animate delay

【解决方案1】：

对于动画，可能想读这个：jQuery animate backgroundColor

$('#class_sign_up_btn, #work_with_brian_btn').click(function() {
 $('#name').focus();
    $('#name').css('background','#E3BD00');

    setTimeout(function() {  
        $('#name').css( {'background':'grey'});
    }, 500);

});

【讨论】：

【解决方案2】：

问题是 jQuery 需要扩展才能支持颜色属性的动画，包括背景颜色。

您有几个选择。您可以获取jQuery Color plugin 或jQuery UI core。希望这会有所帮助。

【讨论】：

【解决方案3】：

使用 setTimeout。确保为超时存储一个引用，以便在再次单击按钮时清除它。

`$(document).ready(function() { 变量超时；

$('#class_sign_up_btn, #work_with_brian_btn').click(function() {
    clearTimeout(timeout);
    $('#name').focus();
    $('#name').css('background','#E3BD00');
    timeout = setTimeout(function() {
        $('#name').animate({'background': 'grey'}, 300);
    }, 500);
});

});

【讨论】：

原来 JQuery UI 有这个构建为 .highlight() method。它完全适用于我正在尝试做的事情——专注于表单中的一个字段，并简要地引起对它的额外关注。很高兴知道如何使用 .setTimout() 方法使用本机 JS 执行此操作。谢谢！

【解决方案4】：

你可以像这样使用动画来代替setTimeout()：

  let orange_h1 = $(".orange_h1");
  orange_h1.animate({
      bottom: "0px",
      height: "50px",
    },
    8000
  );

【讨论】：