jQuery: временно toggleClass/addClass, removeClass?

Question

Я использую следующий код с ZeroClipboard, чтобы изменить текст и класс моей 'copy to clipboard' innerHTML. После нажатия это оживляет переход класса.

client.on("complete", function(client, args) { 
      this.innerHTML = 'Copied to Clipboard'; 
      $(this).removeClass("btn-info").addClass("btn-success", 357);   
      }); 

Есть ли способ, которым я мог бы сделать это изменение класса и innerHTML временно? т. е. изменить класс (до btn-success) всего на несколько секунд, чтобы указать, что нажата кнопка, и автоматически вернуться к исходному классу (btn-info)? И удалить добавленный innerHTML = 'Copied to Clipboard'

Так переход класс будет 'btn-info'> 'btn-success'> 'btn-info'. И верните innerHTML обратно во все, что было заблаговременно (каждая кнопка имеет другой innerHTML).

Я пробовал экспериментировать с toggleClass, но не имел большой удачи.

Answer 1

Попробуйте с помощью простой тайм-аут

client.on("complete", function (client, args) { 
    var html = this.innerHTML; 
    this.innerHTML = 'Copied to Clipboard'; 
    var $this = $(this).removeClass("btn-info").addClass("btn-success"); 

    //clear previous timer 
    clearTimeout($this.data('completeToggler')) 
    var timer = setTimeout(function() { 
     $this.addClass("btn-info").removeClass("btn-success"); 
     $this.html(html) 
    }, 2000); 
    $this.data('completeToggler', timer); 
}); 

Demo: Fiddle

---

также попробовать использовать toggleClass()

client.on("complete", function (client, args) { 
    this.innerHTML = 'Copied to Clipboard'; 
    var $this = $(this).toggleClass("btn-info btn-success"); 
    setTimeout(function() { 
     $this.toggleClass("btn-info btn-success"); 
    }, 2000) 
});