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 plugin或jQuery UI core。希望这会有所帮助。

Answer 3

使用setTimeout。确保将ref存储到超时，以便在再次单击按钮时清除它。

`$（document）.ready（function（）{ var timeout;

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

使用JQuery在表单字段上设置.delay（）。animate（）方法

4 个答案: