I have a page with a form on it, and when the form focuses or blurs, I make some changes to the appearance of the form, mostly regarding colors. To accomplish this, I use .addClass and .removeClass, and those work pretty well. Along with those changes, I also want to change the background color of another element to match the new border color of the form fields (Border color is set in the class that I am adding and removing).

Basically, the order I do things is this: remove  the class from the inputs, grab the border-left-color from the first non-hidden input in the form, then assign that color to the background color of the div.

Here's the code in question:

2. $("#loginFS input").focus(function(e){
3. $("#loginFS input").removeClass("req");
4. $("#loginFS .showPass").css("background-color", $("#loginFS").find("input").filter(':visible').css("border-left-color") );
5. });

loginFS is my fieldset, .showPass is the class of the other element (div) whose background-color I'm trying to change.

The problem is that it's grabbing the border-left-color before the "req" class is removed, and I don't want to do that.

I have tried when() and then() and that doesn't change anything at all, presumably because removing the class is not a deferred method. I don't think I can use .queue because I'm operating on 2 different elements.  How do I tell jquery to change the class, THEN grab the border-left-color and assign it to the background of the other element?

Thanks,

Keith