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

Question

我有一个有jQuery聊天功能的jQuery手机页面。基本上，我在聊天中输入了一些东西，然后几秒钟后，机器人做出了响应。

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

我试过了

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

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

Answer 1

一种解决方案可能是：

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

查看演示：https://jsfiddle.net/d9yodhtm/3/

Answer 2

我找到了我的问题的部分答案。我可以让图像改变，但不能延迟，但我可以继续研究它。代码如下：

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