Как очистить размытие элемента после щелчка и снова размыть его после повторного щелчка? ⇐ Jquery

[Anonymous]

Итак... Я пытаюсь сделать переход «размытие»/размытие к элементу div после щелчка по нему, используя два имени класса в следующем коде: размытие и размытие, которые очищают размытие/размытие элемент соответственно. Пожалуйста, взгляните:

Код: Выделить всё

$(document).ready(function() {
var n = false;
var c = document.querySelector("#n");
c.addEventListener("click", function() {
n = !(n);
$(".content").toggleClass(n ? "unblur" : "blur");
});
});

Код: Выделить всё

.content {
width: 300px;
border: solid 1px black;
padding: 10px;
filter: blur(8px);
}

.unblur {
filter: blur(0px);
transition: filter 1s;
}

.unblur:active {
filter: blur(0px);
}

.blur {
filter: blur(0px);
transition: filter 1s;
}

.blur:active {
filter: blur(8px);
}

Код: Выделить всё

Hello World!

Однако что-то пошло не так, когда «контент» класса попытался вызвать класс «размытие» после «размытия». Как мне это исправить? Спасибо!!

Подробнее здесь: https://stackoverflow.com/questions/768 ... gain-after