jQuery додати клас, почекати, а потім змінити цей клас? - jquery

Мені потрібно додати клас при натисканні на елемент (наприклад, перехід), потім почекати 1 секунду і змінити цей клас (наприклад, готовий перехід).

Я спробував це:

$(this).addClass("transition").delay(1000).addClass("active");

ОНОВЛЕННЯ - Чому наступне не працює? Коли я відкидаю сповіщення, я можу побачити, що воно справляється в потрібний час addClass і removeClass ігноруються

$(".target").click(function() {

$(this).addClass("transition");

$(".target").not(this).removeClass("active transition");

setTimeout(function(){
$(this).removeClass("transition");
$(this).addClass("active");
//  alert("test");
},300);

});

Відповіді:

0 для відповіді № 1

Ви можете використовувати setTimeout (), наприклад:

$(".target").click(function () {
var $target = $(this);

$target.addClass("transition");

$(".target").not(this).removeClass("active transition");

setTimeout(function () {
$target.removeClass("transition").addClass("active");
}, 1000);
});

jsfiddle

Я думаю, що проблема з вашим кодом полягає в тому, що ви намагаєтесь використовувати $(this) всередині функції, яку ви передаєте в setTimeout (), але всередині цієї функції this не посилається на елемент. Код вище уникає цього, визначаючи $target змінна

Ще одним способом виправити свій код буде використання $.proxy() функція для встановлення контексту для функції зворотного виклику, наприклад:

$(".target").click(function () {
$(this).addClass("transition");

$(".target").not(this).removeClass("active transition");

setTimeout($.proxy(function () {
$(this).removeClass("transition").addClass("active");
}, this), 1000);
});

---

6 для відповіді № 2

$("p").css("color", "red").delay(1000).queue(

function (aaa)
{
$(this).css("color", "green");
$(this).dequeue(); //<---- or  aaa();  , will work also
}).Continue...

Приклад: http://jsbin.com/ocOkIfA/2/edit

Подивіться тут на jquery:

За замовчуванням черга, до якої можна додати затримку, стосується лише FX.

встановлення css prop не є анімацією - значить, він не використовує чергу.

так що ми зробили.

---