切换或删除A类，并在单击时添加B类，但会延迟

Question

I have a jQuery mobile page that has a jQuery chat feature. Essentially I type something into the chat and then a few seconds later the bot responds.

Behind the chat feature and filling up the whole page is a class that has a background image, and I wish to have it so when I type into the text field and hit SEND the background image class toggles to another class which has a different background image. I also wish it to have like a 2-3 second delay.

I have tried

$(function () {
$("#chatSend").click(function () {
    $(this).parent(".tasteTheRainbow").toggleClass("orNot");
});
});

Here is my JSfiddle...the background image does not show up but its there. https://jsfiddle.net/mattmega4/d9yodhtm/

Answer 1

One solution could be this:

$(this).closest(".tasteTheRainbow").fadeTo('fast', 0, function () {
    $(this).toggleClass("orNot").fadeTo('fast', 1);
});

See the DEMO: https://jsfiddle.net/d9yodhtm/3/

Answer 2

I found a partial answer to my question. I can get the image to change, but not the delay, but I can keep looking into that. Here is the code:

$(document).ready(function(){
$("button#chatSend").click(function(){
    $(".tasteTheRainbow").addClass("orNot");
});
});