我有一个wordpress网站,当单击按钮时,加载程序之后会出现ajax内容。该代码很好用,但我想添加一种效果,即当前内容将逐渐淡出,新内容将逐渐淡入,不再需要加载程序。
1.
jQuery(document).ready(function() {
jQuery('#main-content').on('click', '.jax a, .page-navigation a', function(e) {
e.preventDefault();
var url = jQuery(this).attr('href'),
title = jQuery(this).attr('title')
;
jQuery('#main-content').html('<img id="loader" alt="loading" width="43" height="11" src="<?php echo get_template_directory_uri(); ?>/library/images/squares.gif"/ >').load(url+ ' #main-content');
document.title = title;
history.pushState({url:url,title:title}, title, url );
});
});
window.onpopstate = function(event) {
document.title = event.state.title;
jQuery('#main-content').html('<img id="loader" alt="loading" width="43" height="11" src="<?php echo get_template_directory_uri(); ?>/library/images/squares.gif"/ >').load(event.state.url+ ' #main-content');
}
我已经尝试了多种变体,例如下面这样,但它可以正常工作,但是它不会像第一个示例中那样更新每个帖子的地址URL。
2.
jQuery('.jax a, .page-navigation a').live('click', function(event) {
var link = $(this).attr('href');
jQuery('#main-content').fadeOut('slow', function(){
jQuery('#main-content').load(link+' #main-content', function(){
jQuery('#main-content').fadeIn('slow');
});
});
return false;
});
知道如何在第一个示例中添加淡入淡出或在第二个示例中添加地址URL更新(历史API)吗?
我没有适合您的解决方案,但也许此问题的答案可以帮助您:https : //stackoverflow.com/a/1789347/4867333
对的调用
load
将使用AJAX,并且将异步运行。您需要在通话结束后立即淡入。您可以通过传递要加载的回调来实现。您的代码将如下所示:
$('#content').load("page1.html", {}, function() { $(this).fadeIn("normal"); }));
有关更多信息,请参见jQuery的.load()的文档。
还是这个:
https://stackoverflow.com/a/9337696/4867333
通过将效果应用于包装器div,他能够实现fadeOut,fadeIn。
您可以尝试以下方法:
jQuery('.jax a, .page-navigation a').live('click', function(event) {
var url = jQuery(this).attr('href'),
title = jQuery(this).attr('title');
jQuery('#main-content').fadeOut('slow', function(){
jQuery('#main-content').load(url+' #main-content', function(){
jQuery('#main-content').fadeIn('slow');
document.title = title;
history.pushState({url:url,title:title}, title, url );
});
});
return false;
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句