Javascript页面过渡未定义

Question

I'm trying to add page transition to my website. But for some reason when I click on a link it redirects to mywebsite.com/undefined

This is the code I'm using

jQuery(document).ready(function($) {
  $('.menu-item').click(function(event) {
    event.preventDefault();
    newLocation = this.href;
    $('.preloader').fadeIn(1000, newpage);
  });

  function newpage() {
    window.location = newLocation;
  }
});

I can't get it to work. Any help would be appreciated.

Answer 1

That's because newLocation is out of scope (it is only available in the click function's scope). (See Update 1.)

Instead, pass it into the newPage function like so:

jQuery(document).ready(function($) {
  $('.menu-item').click(function(event) {
    event.preventDefault();

    $('.preloader').fadeIn(1000, function() {
        // Pass this.href into the newPage function
        newPage(this.href);
    });
  });

  function newPage(newLocation) {
    window.location = newLocation;
  }
});

---

Notes:

• Notice that I am passing a function as the second argument to the .fadeIn function. (See the API Docs .) You cannot just pass newPage(this.href) into the second argument because that will pass the return value of the newPage function (which is null) into the .fadeIn function.

• This pattern applies to other jQuery functions such as .slideUp . Here's an example of an implementation of .slideUp :

   $('.preloader').slideUp({ duration: 1000, easing: "easeInOutQuint" }, function() { newpage(this.href) }); 

---

Update 1:

As noted by Barmar in the comments, since newLocation is not declared with var in your code snippet, it should automatically be a global variable. As such, it should actually be in scope in the newpage function and the original snippet should actually work.