Hi 2 Bunnies,
You probably need to do a couple of things here.
When you look at the show() and hide() functions in the documentation: HiddenMixin - Velo API Reference - Wix.com
You will see that the functions return something called a Promise.
Promises are documented technically here: Promise - JavaScript | MDN
There is also a primer article on Wix use of Promises here: Velo: Working with Promises | Help Center | Wix.com
In a nutshell think of a Promise as a form of tracking code that you might get from Amazon when you order something on line. Your order doesn’t arrive immediately it takes time. So you get a tracking identifier which gives you progress information but more importantly for Amazon and you it tells you when the item was delivered or something else bad happened.
This is what a Promise is used for. When something that takes time and doesn’t happen immediately (for example talking to a server over the internet) is executed you get a Promise as a result. The Promise may return a value OR nothing. In many cases, if you don’t depend on the result of these functions you can simply execute them and they will finish at some point without you needing to worry.
If you want to do something with the result or, in your case KNOW, that the action you requested has finished or failed then you need to use the promise. Remember, like the tracking code, the Promise will only let the code you need to execute to run when what was ‘promised’ has completed (been delivered). This is where the two key Promise functions .then() and .catch() can be useful.
In your case you want to wait for the elements, that you want to be hidden, to hide themselves before you exit the page. One way you could do this is to chain the hide() calls like this:
// Fade the first element
$w('#element1').hide()
.then (() => {
// First element has disappeared
// Hide element 2
// By returning the promise from hide we make the code easier to
// Read by pushing the .then processing to the outer promise (element1).
return $w'(#element2').hide();
})
.then(() => {
// Second element has disappeared
// Hide element 3
return $w'(#element3').hide();
})
.then(() => {
// All elements have been hidden Do something else
// For example you could add a delay timer here also but that would need to be in a Promise to work
// Effectively e.g.
let keepMyPromise = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, '2 second timer expired');
});
return keepMyPromise;
})
.then((timerMessage) => {
console.log('Element fade out completed redirect to new page['+timerMessage+']');
wixLocation.to('/<nextPage>');
})
.catch((error) => {
console.log('An Error occurred');
console.log(error);
});
WARNING: Since I do not know what your page looks like please consider the above code to be an example of what your code COULD look like. Since I have no idea what elements are on your page or how you redirect to the linked page then there may be other things you need to get this to work.
Hope you find this useful
Steve
