Jump to content

Convert Jquery to vanilla js


Majesrse
 Share

Recommended Posts

Hey i have a problem with the code:

$('a').click(function(link) {
link.preventDefault();
location = this.href;
$('body').fadeOut('slow', open);
});
function more() {
window.location = location;
}

It's writen in Jquery but i will convert it to vanilla js. Can somone help me with it?

Link to comment
Share on other sites

Checkout You Might Not Need jQuery for this, it will tell you some replacements for the most common jQuery operations!

Here's a rough draft:

function more(url) {
	window.location = url;
}

document.querySelectorAll('a').forEach(
  link => link.addEventListener('click', e => {
    e.preventDefault();
    const href = e.currentTarget.href;
    document.body.classList.add('fade-out');
    setTimeout(() => more(href), 500);
  });
);

Note that the callback to fadeOut in your code is "open" while the reload function is called "more", is that a mistake? Anyway, I corrected it. Note you have to add a CSS transition for the "fade-out" class yourself, check the link above for an easy example. Also make sure that the timeout (500ms in my example) matches the duration of the CSS transition. Cheers!

Sidenote, if all you're doing is delaying the page reload by a couple hundred miliseconds to have the body fadeout, you might as well get rid of that, it only gets in the way of the user without any real benefit. But I don't know anything about your use-case, so I might be way off here!

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...