如何使JQuery加载fadeOut当前页和slideDown下一页过渡效果
How to make fadeOut current page and slideDown next page transition effect with JQuery load
问:当我点击一个按钮时,如何使当前页面淡出并在下一页滑动。我想让页面过渡 fadeOut 主页,load() 到新页面,然后 slideDown() 到下一页,就像 "curtain"。我可以让它淡出然后淡入,但不知何故当我尝试做下一页 slideDown 它不起作用。我确实发现你的 css 样式需要隐藏元素才能 slideDown,但我在调用过渡 slideDown 效果之前尝试了 bot 'display: none' 和 'hide()' 但没有成功。
我目前的解决方案:
(主页):
<div id="content">
<a class="btn btn-1 btn-1a about" href="about.php" id="aboutbtn">About me</a>
</div>
(关于页面):
<div class="aboutbg">
<a class="btn btn-2 btn-1b about" href="home.php" id="backbtn">Back</a>
</div>
JS:
$('#aboutbtn').click(function(){
$('body').fadeOut(function() {
$(this).load('about.php').fadeIn();
});
return false;
});
是否有替代解决方案来实现此目的或对我当前的解决方案进行补充。我错过了什么?
这是我能找到的最接近描述我的问题的灵感网站:
http://www.nicolasdesle.be/ - 点击-关于我。
有问题吗?就问吧!
预先感谢,
/// E!
您需要对 code.Add CSS 主页进行两项更改,以隐藏您通过 jQuery load
加载的内容
.aboutbg{
display: none;
}
然后更改您的脚本以对已获取内容的 div 执行 fadeOut。
$('#aboutbtn').click(function () {
$("#content").fadeOut(500,function(){
$('body').load('about.php', function () {
$(".aboutbg").slideDown(1000);
})
});
return false;});
问:当我点击一个按钮时,如何使当前页面淡出并在下一页滑动。我想让页面过渡 fadeOut 主页,load() 到新页面,然后 slideDown() 到下一页,就像 "curtain"。我可以让它淡出然后淡入,但不知何故当我尝试做下一页 slideDown 它不起作用。我确实发现你的 css 样式需要隐藏元素才能 slideDown,但我在调用过渡 slideDown 效果之前尝试了 bot 'display: none' 和 'hide()' 但没有成功。
我目前的解决方案:
(主页):
<div id="content">
<a class="btn btn-1 btn-1a about" href="about.php" id="aboutbtn">About me</a>
</div>
(关于页面):
<div class="aboutbg">
<a class="btn btn-2 btn-1b about" href="home.php" id="backbtn">Back</a>
</div>
JS:
$('#aboutbtn').click(function(){
$('body').fadeOut(function() {
$(this).load('about.php').fadeIn();
});
return false;
});
是否有替代解决方案来实现此目的或对我当前的解决方案进行补充。我错过了什么?
这是我能找到的最接近描述我的问题的灵感网站:
http://www.nicolasdesle.be/ - 点击-关于我。
有问题吗?就问吧!
预先感谢, /// E!
您需要对 code.Add CSS 主页进行两项更改,以隐藏您通过 jQuery load
加载的内容.aboutbg{
display: none;
}
然后更改您的脚本以对已获取内容的 div 执行 fadeOut。
$('#aboutbtn').click(function () {
$("#content").fadeOut(500,function(){
$('body').load('about.php', function () {
$(".aboutbg").slideDown(1000);
})
});
return false;});