Setting a .delay().animate() method on a form field with JQuery

Question

I have a button only my page that will jump the user to a contact form below and I want to highlight the first field in the form briefly then have it animate back to the preset focus background color. Seems that using the .css() method doesn't allow delays and also seems that .animate() doesn't work on changing attributes of a form field. Any tips?

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

score 0 · Answer 1 · edited Oct 01 '18 at 23:31

0

Instead of setTimeout() you can use animate like this:

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

edited Oct 01 '18 at 23:31

Robert McKee

21,305
1
43
57

answered Oct 01 '18 at 18:24

yibela

79
3

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

for animation, might want to read this: 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);

});

edited May 23 '17 at 10:24

Community

1
1

answered Mar 11 '12 at 20:16

t q

4,593
8
56
91

score 0 · Answer 3 · answered Mar 11 '12 at 20:26

0

The problem is jQuery needs an extension in order to be able to support animations of color properties, including background-color.

You have a couple options. You can grab the jQuery Color plugin or the jQuery UI core. Hope this helps.

answered Mar 11 '12 at 20:26

cmw

855
7
17

score 0 · Answer 4 · answered Mar 11 '12 at 20:29

0

Use a setTimeout. Make sure to store a ref to the timeout so you can clear it if the buttons are clicked again.

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

});

`

answered Mar 11 '12 at 20:29

chenosaurus

2,263
1
14
6

Turns out JQuery UI has this build in as a [.highlight() method](http://docs.jquery.com/UI/Effects/Highlight). It works for exactly what I was trying to do — focus on a field in a form and draw extra attention to it briefly. Good to know how to do this with native JS though using the .setTimout() method. Thanks! – KeenanC Mar 11 '12 at 20:49

Setting a .delay().animate() method on a form field with JQuery

4 Answers4