How to run .remove() after fade-out effect is completed? - javascript

I would like to run the line "this.parentElement.remove();" after the line "this.parentElement.classList.add("fade-out");" is completed (fade-out lasts 1 second).
Right now .remove() runs instantly so the fade-out effect does not show.
Many thanks in advance!
var deleteItem = document.querySelectorAll("span");
for (var i = 0; i < deleteItem.length; i++) {
deleteItem[i].addEventListener("click", function(event){
this.parentElement.classList.add("fade-out");
this.parentElement.remove();
event.stopPropagation();
});
}

Specify the duration of your fade inside timeout function and when it's done the callback function will execute
Code sample
const deleteItem = document.querySelectorAll("span");
const FADE_OUT_TIME = 2000;
for (let i = 0; i < deleteItem.length; i++) {
deleteItem[i].addEventListener("click", function(event) {
event.stopPropagation();
this.classList.add("fade-out");
setTimeout(_ => this.remove(), FADE_OUT_TIME)
});
}
.cursor-pointer {
cursor: pointer;
}
<span class="cursor-pointer">first</span>
<span class="cursor-pointer">second</span>
<span class="cursor-pointer">third</span>

One approach would be to listen in on the event's transitionend event (reference).
let el = this.parentElement;
el.addEventListener('transitionend', () => el.remove());
el.classList.add("fade-out");
The attractiveness of this approach versus listening for a timeout means you don't have to hard-code the transition duration in your JavaScript (if you ever change it, you'd have to update both your CSS and your JavaScript.) The event will fire whenever it ends, however long it takes.

Assuming .fade-out triggers an animation, you can add a animationend to the element to achieve this... The callback is called after any animation has ended
var deleteItem = document.querySelectorAll("span");
for (var i = 0; i < deleteItem.length; i++) {
deleteItem[i].addEventListener("click", function(event) {
this.parentElement.addEventListener("animationend", function() {
this.parentElement.remove();
});
this.parentElement.classList.add("fade-out");
event.stopPropagation();
});
}

Related

integrating SetTimeOut function after button click

I have created a snippet of code that changes the state from display:block to display:none by using an onClick element. My goal is to delay the change in state, for a few seconds whilst an animation effect occurs.
This snippet of code below is what I am currently using to change the state of the element, but unsure on how to incorporate a delay.
Any advice or suggestions is greatly appreciated.
Thanks,
Ant
function showDiv1(elem) {
var divsToCheck = ["close","Holder"]; // Add to here to check more divs
for (var i = 0; i < divsToCheck.length; i++) {
if (divsToCheck[i] == elem) {
document.getElementById(divsToCheck[i]).style.display = "block";
} else {
document.getElementById(divsToCheck[i]).style.display = "none";
}
}
}
Put the code you want to be delayed inside an anonymous function, like so:
function showDiv1(elem) {
var divsToCheck = ["close","Holder"]; // Add to here to check more divs
for (var i = 0; i < divsToCheck.length; i++) {
if (divsToCheck[i] == elem) {
setTimeout(function() {
document.getElementById(divsToCheck[i]).style.display = "block";
}, 500);
} else {
setTimeout(function() {
document.getElementById(divsToCheck[i]).style.display = "none";
}, 500);
}
}
}
Here, 500 means delaying by 500 ms. You can change this to whatever amount of time (in milliseconds) that you need.
You should call a function in your loop that takes care of the setTimeout and hiding/showing instead of calling the timeout function in a loop. (Won't work because i is no longer available). See here: https://jsbin.com/refodobaca/1/edit?html,css,js,output
function showDiv1(elem) {
var divsToCheck = ["close","Holder"]; // Add to here to check more divs
for (var i = 0; i < divsToCheck.length; i++) {
if (divsToCheck[i] == elem) {
showHideDiv(divsToCheck[i], true);
} else {
showHideDiv(divsToCheck[i], false);
}
}
}
function showHideDiv(elem, bShow) {
var timeoutSeconds = 3;
setTimeout(function() {
document.getElementById(elem).style.display = (bShow ? "block" : "none");
}, timeoutSeconds * 1000);
}
showDiv1('Holder');
Your question is a little unclear because the name of your function is showDiv1 but you explain that you're trying to hide an element, so I've tried to answer in light of this and hopefully it will give you some ideas.
This code displays a couple of divs. If you click on them they turn red and, after a couple of seconds (to represent an animation), they are hidden.
dummyAnim returns a promise. After the animation has run its course (here represented by a two second delay) it is resolved. I've used await to pause code execution in an async function until the animation has resolved.
// Grab the elements and add click handlers to them
const divs = document.querySelectorAll('div');
divs.forEach(div => div.addEventListener('click', hideElement, false));
function dummyAnim() {
// return a promise which resolves (an animation)
// after two seconds
return new Promise((resolve, reject) => {
setTimeout(() => resolve(), 2000);
});
}
async function hideElement() {
this.classList.add('red');
await dummyAnim();
this.classList.add('hidden');
}
div { color: black; display: block }
.hidden { display: none }
.red { color: red }
<div>close</div>
<div>holder</div>

javascript click game using less html

I'm making a basic javascript game where you need to click multiple images in a certain period of time. (currently 4 seconds)
My javascript looks like this
document.getElementById("myBtn").addEventListener("click", countdown);
function countdown() {
setTimeout(function(){
prompt("you got" + counter);
}, 4000);
}
var counter = 0;
function countup() {
counter = counter + 1;
}
And while that does work, every img in my HTML has to have:
onclick="countup(); this.onclick=null"
which after 20 pictures is a lot. My question is, is there a way to condense this? Some js method of collecting all the pictures by class and applying the click countup and null to it?
You can use document.querySelectorAll() to select all your images and add an event listener to count up and remove the event listener like so:
function handleClick(e)
{
countup();
e.target.removeEventListener('click', handleClick);
}
var images = document.querySelectorAll('img');
for (var i = 0; i < images.length; i++)
{
images[i].addEventListener('click', handleClick);
}
More about document.querySelectorAll here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
You can also use a classname with querySelectorAll, pass in '.myClass'
Yes - use getElementsByClassName. E.g. if you apply the class 'button' to all of your button images:
var buttons = document.getElementByClassName('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', countup);
}
To remove the event listener after the first click requires something a bit more complicated, however. For example, you can write a second function that adds an event listener which calls your original function and then removes itself.
var buttons = document.getElementByClassName('button');
function clickOnce(el, func) {
function listener() {
func();
el.removeEventListener('click', listener);
}
el.addEventListener('click', listener);
}
for (var i = 0; i < buttons.length; i++) {
clickOnce(buttons[i], countup);
}

Clearing setInterval() Issue

I have a setInterval on a function X that runs every 500ms. In this function X, I call another function Y that essentially binds an event on some divs. However, I would like to unbind these events the next time the function X is called (to start "fresh"). My code doesn't seem to work:
setInterval(this.board.updateBoard, 500); //called from another constructor
This then initiates the functions below:
Board.prototype.updateBoard = function() {
//I attempt to unbind ALL my divs
var divs = this.$el.find("div");
for(var i = 0; i < divs.length; i++) {
$(divs[i]).unbind(); //Apparently this doesn't work?
}
//...some code here...
//find appropriate $div's (multiple of them), and then calls this.beginWalking() below on each of those
//loop here
this.beginWalking($div, direction + "0", direction + "1");
//end of loop
}
//alternate between classes to give appearance of walking
Board.prototype.beginWalking = function ($div, dir0, dir1) {
return setInterval(function () {
if ($div.hasClass(dir0)) {
$div.removeClass(dir0);
$div.addClass(dir1);
} else {
$div.removeClass(dir1);
$div.addClass(dir0);
}
}.bind(this), 80);
};
Basically, updateBoard is called every 500ms. Each time it's called, beginWalking is called to set another interval on a div. The purpose of this other interval, which functions correctly, is to add and remove a class every 80ms. I just can't seem to unbind everything before the next updateBoard is called.
Any suggestions appreciated!
use clearInterval()
edit: $(selector).toggleClass(dir0) might also be helpful
// In other file, use a global (no var) if you need to read it from another file:
updaterGlobal = setInterval(this.board.updateBoard, 500);
// store interval references for clearing:
var updaterLocals = [];
Board.prototype.updateBoard = function() {
//I attempt to unbind ALL my divs
var divs = this.$el.find("div");
// Stop existing div timers:
while(updaterLocals.length > 0){
clearInterval(updaterLocals[0]);
updaterLocals.shift(); // remove the first timer
}
//...some code here...
//loop here to call the below on several $div's
this.beginWalking($div, direction + "0", direction + "1");
//end of loop
}
//alternate between classes to give appearance of walking
Board.prototype.beginWalking = function ($div, dir0, dir1) {
var interval = setInterval(function () {
if ($div.hasClass(dir0)) {
$div.removeClass(dir0);
$div.addClass(dir1);
} else {
$div.removeClass(dir1);
$div.addClass(dir0);
}
}.bind(this), 80);
// Save the timer:
updaterLocals.push(interval);
return;
};

Javascript function shows only last element of array

Please take a look at this function:
var msgdiv, i=0;
msgdiv=$("#message");
messages=["Welcome!","Добро пожаловать!"];
function fadeMessages(messages, div){
while(i<messages.length){
div.fadeOut(1000).html('').append(messages[i]).fadeIn(1000);
i=i+1;
}
}
fadeMessages(messages,msgdiv);
What I want to do is, to show one by one elements of array. But, function above shows only last element of array messages.length time. Where I did wrong?
Live example: http://jsfiddle.net/QQy6X/
The while executes much much faster than the fadeOut/fadeIn calls, so you only see the last result. You need to make each animation wait for the previous ones to finish.
I like to solve these problems recursively. Note, it does alter the messages array, but it's not too hard to convert this to use a counter instead (like your original version). Here you go:
var $msgdiv = $('#message'),
messages = ['Xoş gəlmişsiniz!', 'Welcome!', 'Добро пожаловать!'];
function showNext() {
var msg = messages.shift();
if (msg) {
$msgdiv.fadeOut(1000, function () {
$(this).text(msg).fadeIn(1000, showNext);
});
}
}
showNext();
Demo: http://jsfiddle.net/mattball/Exj95/
Here's a version that leaves messages intact:
var $msgdiv = $('#message'),
messages = ['Xoş gəlmişsiniz!', 'Welcome!', 'Добро пожаловать!'],
i = 0;
function showNext() {
if (i < messages.length) {
var msg = messages[i];
$msgdiv.fadeOut(1000, function () {
i++;
$(this).text(msg).fadeIn(1000, showNext);
});
}
}
showNext();
Demo: http://jsfiddle.net/mattball/wALfP/
Your while loop finishes executing before the div has had a chance to fade out. Use an if statement and recursion:
var msgdiv = $("#message");
var i = 0;
var messages = ["Welcome!", "Добро пожаловать!"];
(function fadeMessages() {
if (i in messages) {
msgdiv.fadeOut(1000, function() {
$(this).html('').append(messages[i++]).fadeIn(1000, fadeMessages);
});
}
})();
http://jsfiddle.net/QQy6X/6/
Your while loop finishes very quickly; instead you should wait for the animation to finish before starting the next one. This is easy to do by adding a callback function to fadeIn. I would use this:
+function(){
var $msgdiv = $("#message");
var i = -1;
var messages = ["Xoş gəlmişsiniz!","Welcome!","Добро пожаловать!"];
+function fadeNext(){
$msgdiv.fadeOut(1000, function(){
$msgdiv.text(messages[i = (i + 1) % messages.length]);
$msgdiv.fadeIn(1000, fadeNext);
});
}();
}();
http://jsfiddle.net/Paulpro/QQy6X/7/
In jQuery, you can't intertwine animations and non-animations in the way you are doing and expect them to run in the right order. The animations will go into the animation queue and get sequenced one after another there, but the non-animations will all run immediately. Thus, things won't happen in the right order.
To do something like you want to do, you can use code like this.
messages=["Welcome!","Добро пожаловать!"];
function fadeMessages(msgs, div) {
var i = 0;
function next() {
if (i < msgs.length) {
div.fadeOut(1000, function() {
div.html(msgs[i++]).fadeIn(1000, next);
});
}
}
next();
}
fadeMesssages(messages, div);
This uses the completion functions of both fadeIn() and fadeOut() to carry out the next steps. Here's how it works:
It fades out the div.
In the completion function of the fadeOut, it sets the next message and then starts the fadeIn.
It advances the message counter.
In the completion function from the fadeIn, it calls the function to start the next iteration.
If you want a delay before the fadeOut (to make sure a given message displays for a certain amount of time), you can add that with this .delay(2000) added in the right place:
messages=["Welcome!","Добро пожаловать!"];
function fadeMessages(msgs, div) {
var i = 0;
function next() {
if (i < msgs.length) {
div.delay(2000).fadeOut(1000, function() {
div.html(msgs[i++]).fadeIn(1000, next);
});
}
}
next();
}
fadeMesssages(messages, div);
If you want a delay before the next iteration starts, you can do that like this with a setTimeout:
messages=["Welcome!","Добро пожаловать!"];
function fadeMessages(msgs, div) {
var i = 0;
function next() {
if (i < msgs.length) {
div.fadeOut(1000, function() {
div.html(msgs[i++]).fadeIn(1000, function() {
setTimeout(next, 2000);
});
});
}
}
next();
}
fadeMesssages(messages, div);

restart loop after it's paused by flag

I'm putting together some code to essentially replace the contents of a div when I mouseover a specific link. I then added the changer function to cycle through the content replacement automatically. I set flags for mouseover and mouseout and I can actually get the changer function to stop on mouseover but I can't quite figure out how to make it start up again on mouseout. Any advice is appreciated.
var pause=false;
$('.banner-nav a').mouseover(function () {
pause=true;
setFeature(this);
return false;
});
$('.banner-nav a').mouseout(function () {
pause=false;
});
changer(0, 5000);
function setFeature(f) {
var m = $(f).attr('rel');
$('.banner-nav a').not(f).removeClass('active');
$(f).addClass('active');
$('#featureContainer').html($(m).html());
}
function changer(index, interval) {
var buttons = $('.trigger'),
buttons_length = buttons.length;
var button = buttons.eq(index % buttons_length);
setFeature($(button));
setTimeout(function() {
if (!pause) {
changer(++index, interval);
}
}, interval)
}
The issue is that changer is responsible for its own delayed execution, but pausing it stops the scheduled execution. Another problem is that the next scheduled execution (if any) still happens after pausing.
Use setInterval instead of setTimeout. Instead of using a flag, clear the interval to pause and start it again to unpause.
(function() {
var index=0;
function changer() {
var buttons = $('.trigger'),
buttons_length = buttons.length;
var button = buttons.eq(index % buttons_length);
setFeature($(button));
++index;
}
var changerInterval,
period = 5000;
function startChanger() {
if (! changerInterval) {
changerInterval = setInterval(changer, interval);
}
}
function stopChanger() {
clearInterval(changerInterval);
changerInterval = 0;
}
$('.banner-nav a').mouseover(function () {
stopChanger();
setFeature(this);
return false;
});
$('.banner-nav a').mouseout(function () {
startChanger();
});
/* could implement other functions to e.g. change the period */
function setChangerPeriod() {
...
}
window.setChangerPeriod = setChangerPeriod;
...
})

Categories

Resources