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

Question

我的页面上只有一个按钮，可以将用户跳转到下面的联系人表单，我想简单地突出显示表单中的第一个字段，然后将其动画化回预设的焦点背景色。似乎使用.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);
    });
});

Answer 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);
});

Answer 2

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

你有几个选择。您可以获取jQuery Color插件或jQuery UI核心。希望这能有所帮助。

Answer 3

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

`$（document）.ready（function）{var超时；

$('#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);
});

})；

`

Answer 4

您可以使用以下动画来代替setTimeout()：

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