如何解决导航中的jQuery淡入淡出动画冲突？

Question

I am currently working on a company website on Wordpress that has a navigation menu that would seamlessly load the link's content after fade in through the jQuery load() function. Like so:

$("#header .menu a, #header .logo, nav.menu_mobile a:not('.close')").bind('click',function () {

var href = $(this).attr("href");
var title = $(this).attr("title");

history.pushState(null, title, href);

$("#page").fadeOut(500, function() {
    $("#page").delay(500).empty();
    $(window).scrollTop(0);
    $("#header").removeClass("scrolled");
});

$('#page').load(href + " .content", function() {
    $('#page').fadeIn(500, function(){

        if ( $("#main").has(".posts") ) {
            setTimeout(function() {
                masonrygrid();
            }, 1000);
        }

        setTimeout(function() {
            $("body").getNiceScroll().resize();
        }, 500);

    });
});

return false;
});

Currently, I'm having problems executing the "Work" page, which is basically a portfolio page.

There should be a modal box that would fade in when the posts are clicked and all of the images from the posts would be shown on the modal box.

When the "Work" page is accessed through the address bar, the function (shown below) would work fine. However, when the page is accessed through the navigation menu, though, the function doesn't work.

$(".page-id-44 .post .meta").click(function() {
    $("#gallery").fadeIn();
    return false;
});

$("#gallery .close").click(function() {
    $("#gallery").fadeOut();
    return false;
});

Demo: trivecs.com (still under construction, though)

Answer 1

With Wordpress, you just use jQuery(document).ready(function($){ });

And then everything inside of that, you can use the $ like you normally would.

Answer 2

First of all, by default $ won't work in WordPress as it is. Because, jQuery supplied with WordPress is in noConflict mode to avoid issues with other libraries that may use the $ as their object reference.

So wrap your all jquery code inside this.

(function($){
    // your code here
})(jQuery)

Update:

Above code will work if it's jQuery's issue ($ is not a function). If there's other issue, post error in question from console.

Update2:

I found the issue on your website: Change code for work page like below.

It's event delegation. When page loads you don't have those class in your DOM, so when you navigate via navigation then you are adding those dynamically. So event delegation is for that dynamic classes in document . See this link

$(document).on('click', ".page-id-44 .post .meta", function() {
    $("#gallery").fadeIn();
    return false;
});

$(document).on('click', "#gallery .close", function() {
    $("#gallery").fadeOut();
    return false;
});

Answer 3

Try this:

jQuery(document).ready(function( $ ) {
    // $ Works! You can test it with next line if you like
    // console.log($);
});

Answer 4

Try jQuery of all " $ ".

 jQuery("#header .menu a, #header .logo, nav.menu_mobile a:not('.close')").bind('click',function () { var href = jQuery(this).attr("href"); var title = jQuery(this).attr("title"); history.pushState(null, title, href); jQuery("#page").fadeOut(500, function() { jQuery("#page").delay(500).empty(); jQuery(window).scrollTop(0); jQuery("#header").removeClass("scrolled"); }); jQuery('#page').load(href + " .content", function() { jQuery('#page').fadeIn(500, function(){ if ( jQuery("#main").has(".posts") ) { setTimeout(function() { masonrygrid(); }, 1000); } setTimeout(function() { jQuery("body").getNiceScroll().resize(); }, 500); }); }); return false; });