[英]Transition between html pages using jquery to load a div?
我正在尝试使用jQuery在HTML页面之间创建时尚的过渡。
但是,我只需要淡入和淡出html页面的内容即可。
例如:
我有两个页面1.html和2.html
他们都有一个名为#content
的DIV
我只需要淡入淡出div content
而不是淡出整个html页面。
我正在使用下面的代码:
<script type="text/javascript">
var speed = 'slow';
$('html, body').hide();
$(document).ready(function() {
$('html, body').fadeIn(speed, function() {
$('a[href], button[href]').click(function(event) {
var url = $(this).attr('href');
if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
event.preventDefault();
$('html, body').slideToggle(speed, function() {
window.location = url;
});
});
});
});
</script>
我也尝试过这种方法,但是它什么也没做:
<script type="text/javascript">
var speed = 'slow';
$('html, body').hide();
$(document).ready(function() {
$('html, body #content').fadeIn(speed, function() {
$('a[href], button[href]').click(function(event) {
var url = $(this).attr('href');
if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
event.preventDefault();
$('html, body').slideToggle(speed, function() {
window.location = url;
});
});
});
});
</script>
这可能吗?
谢谢
试试这个代码
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('a[href], button[href]').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
点击功能
$('a[href], button[href]').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
参考这个小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.