How to fade out page A and fade in page B? In javascript only

Question

What I want to do:

On page A, there are links to many pages e.g. page B, page C etc.
When I click on a link, I want the current page to fade out and the new page to fade in.

I searched a lot and got lots of jquery solutions - they work fine but I want to find out how I can do this in vanilla javascript only. I tried to work it out on my own but it doesn't work. I've already checked for console errors and put the JS script in the footer.

document.addEventListener("click", "a", function () {

// get the href attribute
   var newUrl = this.attr("href");

// veryfy if the new url exists or is a hash
if (!newUrl || newUrl[0] === "#") {
    // set that hash
    location.hash = newUrl;
    return;
}

// now, fadeout the html (whole page)
document.querySelector("html").fadeOut(function () {
    // when the animation is complete, set the new location
    location = newUrl;
});

// prevent the default browser behavior.
return false;
});}

addEventListener - second parameter "a"? this is not jquery :) — Paweł, Dec 13 '16 at 07:21
@qxz - I'm not too sure why the page is not fading out upon click and why the next page isn't fading in — Sean Poh, Dec 13 '16 at 07:31
`.fadeOut` is a jQuery function, and won't work on a normal `HTMLElement`. See [this question](http://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css) for potential solutions. Same for `.attr`: use `getAttribute`(https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute). If you look at your console errors, you should be seeing that those aren't functions... — qxz, Dec 13 '16 at 15:30
@qxz that's funny - i searched on my console earlier and .fadeOut or .attr didn't come up as errors for me. That's really strange. But anyway, I solved this issue just a few hours after I posted this! — Sean Poh, Dec 13 '16 at 17:53
(If you'd like to, you could answer your own question for future googlers) — qxz, Dec 13 '16 at 20:43

score 2 · Accepted Answer · answered Dec 14 '16 at 06:18

Done in vanilla javascript.

When you click on a link, the code snippet delays the default loading of the next page until the fade-out animation is complete.

document.querySelector("a").addEventListener("click", function () {

  event.preventDefault();
// get the href attribute
var newUrl = this.getAttribute("href");
document.querySelector("body").addClass("fade-out");

// verify if the new url exists or is a hash
if (!newUrl || newUrl[0] === "#") {
    // set that hash
    location.hash = newUrl;
    return;
}

// now, fadeout the html (whole page). You need to set the duration manually. 
//if you have an animation that lasts .5, 1 or 2 seconds etc, you need to put the duration below

var animationDuration = 500;
setTimeout(function() {
    location = newUrl;}, animationDuration);
});}

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

You can use iframe inside modal popup and can open page in it.

See below links for reference :-

load iframe in bootstrap modal

edited May 23 '17 at 12:08

Community

1
1

answered Dec 13 '16 at 07:22

Anand Systematix

632
5
15

How to fade out page A and fade in page B? In javascript only

2 Answers2