我这里有两个主要的jQuery元素。一个是用另一个页面替换页面内容的页面转换，另一个是智能导航（移动和移动页面滚动）。
过渡和导航在桌面设备上完美运行。问题是，当您跳转到移动导航栏时，它变得无法点击。
只有在完成页面转换后才能无法点击，所以我确信它们在某种程度上是冲突的。
实时页面位于https://nathanworking.github.io/page-transition-smart-nav/
下面是两个脚本。 注意：我在组合这些部分时所做的很简单，在我的.js文件中有“动画页面过渡”，然后是“智能导航”第二。
如果我只是将这两个错误结合起来，那么有没有人想过如何合并这些？
感谢您的帮助！
动画页面转换
/*-----------------------------------
----- Animated Page transitions ------
--------------------------------------*/
jQuery(document).ready(function(event){
var isAnimating = false,
newLocation = '';
firstLoad = false;
//trigger smooth transition from the actual page to the new one
$('body').on('click', '[data-type="page-transition"]', function(event){
event.preventDefault();
//detect which page has been selected
var newPage = $(this).attr('href');
//if the page is not already being animated - trigger animation
if( !isAnimating ) changePage(newPage, true);
firstLoad = true;
});
//detect the 'popstate' event - e.g. user clicking the back button
$(window).on('popstate', function() {
if( firstLoad ) {
/*
Safari emits a popstate event on page load - check if firstLoad is true before animating
if it's false - the page has just been loaded
*/
var newPageArray = location.pathname.split('/'),
//this is the url of the page to be loaded
newPage = newPageArray[newPageArray.length - 1];
if( !isAnimating && newLocation != newPage ) changePage(newPage, false);
}
firstLoad = true;
});
function changePage(url, bool) {
isAnimating = true;
// trigger page animation
$('body').addClass('page-is-changing');
$('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
loadNewContent(url, bool);
newLocation = url;
$('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
});
//if browser doesn't support CSS transitions
if( !transitionsSupported() ) {
loadNewContent(url, bool);
newLocation = url;
}
}
function loadNewContent(url, bool) {
url = ('' == url) ? 'index.html' : url;
var newSection = 'cd-'+url.replace('.html', '');
var section = $('<div class="cd-main-content '+newSection+'"></div>');
section.load(url+' .cd-main-content > *', function(event){
// load new content and replace <main> content with the new one
$('main').html(section);
//if browser doesn't support CSS transitions - dont wait for the end of transitions
var delay = ( transitionsSupported() ) ? 1200 : 0;
setTimeout(function(){
//wait for the end of the transition on the loading bar before revealing the new content
( section.hasClass('cd-about') ) ? $('body').addClass('cd-about') : $('body').removeClass('cd-about');
$('body').removeClass('page-is-changing');
$('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
isAnimating = false;
$('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
});
if( !transitionsSupported() ) isAnimating = false;
}, delay);
if(url!=window.location && bool){
//add the new page to the window.history
//if the new page was triggered by a 'popstate' event, don't add it
window.history.pushState({path: url},'',url);
}
});
}
function transitionsSupported() {
return $('html').hasClass('csstransitions');
}
});
智能导航
/*-----------------------------------
----- Smart Navigation ------
--------------------------------------*/
jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "menu" link is shown
var offset = 300;
var navigationContainer = $('#cd-nav'),
mainNavigation = navigationContainer.find('#cd-main-nav ul');
//hide or show the "menu" link
checkMenu();
$(window).scroll(function(){
checkMenu();
});
//open or close the menu clicking on the bottom "menu" link
$('.cd-nav-trigger').on('click', function(){
$(this).toggleClass('menu-is-open');
//we need to remove the transitionEnd event handler (we add it when scolling up with the menu open)
mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
});
function checkMenu() {
if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
mainNavigation.addClass('has-transitions');
});
} else if ($(window).scrollTop() <= offset) {
//check if the menu is open when scrolling up
if( mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions') ) {
//close the menu with animation
mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//wait for the menu to be closed and do the rest
mainNavigation.removeClass('is-visible is-hidden has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
});
//check if the menu is open when scrolling up - fallback if transitions are not supported
} else if( mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions') ) {
mainNavigation.removeClass('is-visible has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
//scrolling up with menu closed
} else {
navigationContainer.removeClass('is-fixed');
mainNavigation.removeClass('has-transitions');
}
}
}
});
使用ryancdotnet的评论 - 这是正确的jQuery：
/*-----------------------------------
----- Animated Page transitions ------
--------------------------------------*/
jQuery(document).ready(function(event){
var isAnimating = false,
newLocation = '';
firstLoad = false;
//trigger smooth transition from the actual page to the new one
$('body').on('click', '[data-type="page-transition"]', function(event){
event.preventDefault();
//detect which page has been selected
var newPage = $(this).attr('href');
//if the page is not already being animated - trigger animation
if( !isAnimating ) changePage(newPage, true);
firstLoad = true;
});
//detect the 'popstate' event - e.g. user clicking the back button
$(window).on('popstate', function() {
if( firstLoad ) {
/*
Safari emits a popstate event on page load - check if firstLoad is true before animating
if it's false - the page has just been loaded
*/
var newPageArray = location.pathname.split('/'),
//this is the url of the page to be loaded
newPage = newPageArray[newPageArray.length - 1];
if( !isAnimating && newLocation != newPage ) changePage(newPage, false);
}
firstLoad = true;
});
function changePage(url, bool) {
isAnimating = true;
// trigger page animation
$('body').addClass('page-is-changing');
$('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
loadNewContent(url, bool);
newLocation = url;
$('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
});
//if browser doesn't support CSS transitions
if( !transitionsSupported() ) {
loadNewContent(url, bool);
newLocation = url;
}
}
function loadNewContent(url, bool) {
url = ('' == url) ? 'index.html' : url;
var newSection = 'cd-'+url.replace('.html', '');
var section = $('<div class="cd-main-content '+newSection+'"></div>');
section.load(url+' .cd-main-content > *', function(event){
// load new content and replace <main> content with the new one
$('main').html(section);
//if browser doesn't support CSS transitions - dont wait for the end of transitions
var delay = ( transitionsSupported() ) ? 1200 : 0;
setTimeout(function(){
//wait for the end of the transition on the loading bar before revealing the new content
( section.hasClass('cd-about') ) ? $('body').addClass('cd-about') : $('body').removeClass('cd-about');
$('body').removeClass('page-is-changing');
$('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
isAnimating = false;
$('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
});
// ----- Animated Page transitions ------
//open or close the menu clicking on the bottom "menu" link
jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "menu" link is shown
var offset = 300;
var navigationContainer = $('#cd-nav'),
mainNavigation = navigationContainer.find('#cd-main-nav ul');
//hide or show the "menu" link
checkMenu();
$(window).scroll(function(){
checkMenu();
});
//open or close the menu clicking on the bottom "menu" link
$('.cd-nav-trigger').on('click', function(){
$(this).toggleClass('menu-is-open');
//we need to remove the transitionEnd event handler (we add it when scolling up with the menu open)
mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
});
function checkMenu() {
if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
mainNavigation.addClass('has-transitions');
});
} else if ($(window).scrollTop() <= offset) {
//check if the menu is open when scrolling up
if( mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions') ) {
//close the menu with animation
mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//wait for the menu to be closed and do the rest
mainNavigation.removeClass('is-visible is-hidden has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
});
//check if the menu is open when scrolling up - fallback if transitions are not supported
} else if( mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions') ) {
mainNavigation.removeClass('is-visible has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
//scrolling up with menu closed
} else {
navigationContainer.removeClass('is-fixed');
mainNavigation.removeClass('has-transitions');
}
}
}
});
// ----- Animated Page transitions ------
if( !transitionsSupported() ) isAnimating = false;
}, delay);
if(url!=window.location && bool){
//add the new page to the window.history
//if the new page was triggered by a 'popstate' event, don't add it
window.history.pushState({path: url},'',url);
}
});
}
function transitionsSupported() {
return $('html').hasClass('csstransitions');
}
});
答案 0 :(得分：2)
第一次点击后，移动导航似乎总是失败。在调试时，您似乎正在删除菜单并重新添加它，但点击事件之后没有连接。
具体来说，这部分似乎没有再被解雇：
$('.cd-nav-trigger').on('click',......