切换或删除A类并在点击时添加B类并延迟

Question

我有一个jQuery移动页面，它具有jQuery聊天功能。基本上我在聊天中输入内容，然后几秒钟后机器人响应。

在聊天功能的后面并填满整个页面是一个有背景图像的类，我希望这样，当我输入文本字段并点击SEND时，背景图像类切换到另一个具有不同的背景图像。我也希望它有2-3秒的延迟。

我试过了

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

这是我的JSfiddle ......背景图片没有显示，但它在那里。 https://jsfiddle.net/mattmega4/d9yodhtm/

Answer 1

一种解决方案可能是这样的：

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

参见DEMO：https://jsfiddle.net/d9yodhtm/3/

Answer 2

我找到了一个问题的部分答案。我可以改变图像，但不是延迟，但我可以继续调查。这是代码：

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