切換或刪除A類，並在單擊時添加B類，但會延遲

Question

我有一個具有jQuery聊天功能的jQuery移動頁面。 從本質上講，我在聊天中輸入了一些內容，然后在幾秒鍾后，機器人進行了響應。

聊天功能和整個頁面的后面是一個具有背景圖像的類，我希望擁有它，因此當我在文本字段中鍵入內容並單擊“發送”時，背景圖像類會切換到另一個具有不同背景圖像的類。 我也希望它有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);
});

參見演示： https : //jsfiddle.net/d9yodhtm/3/

Answer 2

我找到了部分答案。 我可以改變圖像，但不能改變延遲，但是我可以繼續研究。 這是代碼：

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