Установка метода .delay (). Animate () в поле формы с помощью JQuery

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

Вместо setTimeout() вы можете использовать анимацию следующим образом:

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

Answer 2

Проблема в том, что jQuery нуждается в расширении, чтобы иметь возможность поддерживать анимацию свойств цвета, включая background-color.

У вас есть пара вариантов.Вы можете получить плагин jQuery Color или ядро ​​ jQuery UI .Надеюсь, это поможет.

Answer 3

Используйте setTimeout.Обязательно сохраните ссылку на тайм-аут, чтобы ее можно было очистить при повторном нажатии кнопок.

`$ (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

для анимации, возможно, захотите прочитать это: 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);

});