I want to make something like a Slideshow, but if you press a button for the next Picture, it should blur out until its unrecognizeable and then the next should appear blurred and become sharp. Problem here is, i would have to apply the blur via JS and my current approach looks like this:
document.getElementById("no1").style.filter = "blur(3Px)";
If i apply the blur with css it works just fine, but i need it to apply when the button is clicked, which does not work. The obejct i am trying to blur is an <img>
Also, it would be good to know, if there is something like a waiting condition or if additional steps in the function will wait for the transition duration of the blur to be done before starting.
2 Answers
const img = document.querySelector('img');
img.addEventListener('click', toggleBlur);
function toggleBlur() {
this.classList.toggle('blur');
}img { transition: filter 1s linear; }
.blur { filter: blur(30px); }<img src=""></img>Works for me in Chrome, Firefox, Safari, latest Edge...
Although gman's solution is a more solid one (toggling a CSS class via JS), this simple approach with applying the filter via JavaScript also works:
var btn = document.getElementById('blurBtn');
var img = document.getElementById('blurImg');
btn.addEventListener('click', addBlur)
function addBlur() {
img.style.filter = 'blur(3px)';
}<img id="blurImg" src="">
<button type="button" id="blurBtn">Blur</button>
