【发布时间】：2011-12-11 17:34:42
【问题描述】：
我设计了一个简单的网站，其中包含主页和关于页面以及滑动联系表单。您可以查看网站here。
我想在索引和关于页面之间添加一个很好的过渡。我想最简单的解决方案是淡入淡出，但滑动内容也可能看起来不错。我试图实现dynamic page script on CSS tricks，但无法让它与我现有的导航系统一起工作，而且效果的顺序也不正确。我认为订单需要是：
- 淡出（或滑出）当前页面
- 更改页面高度以适应新内容
- 在新页面中淡入（或滑动）
我想知道是否有人可以推荐一种合适的方法来达到我正在寻找的效果。
谢谢，
尼克
添加
关闭按钮点击功能：
<script type="text/javascript">
$(document).ready(function(){
$(".close").click(function(){
$("#panel").slideUp("slow");
$("#home").addClass("current");
$("#contact").removeClass("current");
return false;
});
});
</script>
代表点击功能：
$("nav").delegate("a.fade", "click", function ()
{
window.location.hash = $(this).attr("href");
$("#panel").slideUp("slow");
$(this).addClass("current");
$("#contact").removeClass("current");
return false;
});
FULL DYNAMICPAGE.JS
$(function ()
{
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el,
$panel = $("#panel");
$panel.visible = false;
$(window).bind('hashchange', function ()
{
newHash = window.location.hash.substring(1);
if (newHash)
{
if ($panel.visible)
{
$pageWrap.animate({ height: "-=" + $panel.height() + "px" }, function ()
{
$pageWrap.height($pageWrap.height());
$panel.visible = false;
});
$panel.slideUp();
baseHeight = $pageWrap.height() - $mainContent.height() - $panel.height();
}
else
{
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
}
$mainContent
.find("#guts")
.fadeOut(500, function ()
{
$mainContent.hide().load(newHash + " #guts", function ()
{
$pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }, function ()
{
$mainContent.fadeIn(500);
$pageWrap.css("height", "auto");
});
});
});
};
});
$("nav").delegate("a.fade", "click", function ()
{
window.location.hash = $(this).attr("href");
$("#panel").slideUp("slow");
$(this).addClass('clicked');
$("a").not(this).removeClass('clicked');
$(".current", this).stop().animate({
opacity: 1
}, {
duration: 100,
specialEasing: {
opacity: 'linear',
},
});
$(".current").not($(".current",this)).stop().animate({
opacity: 0
}, {
duration: 2000,
specialEasing: {
opacity: 'linear',
},
});
return false;
});
$("#nav-bottom").delegate("a", "click", function ()
{
$("#panel").slideDown("slow");
return false;
});
$("#contact").click(function ()
{
$("#panel").slideDown("slow");
// $(this).addClass("current");
// $("#home, #about").removeClass("current");
$(this).addClass('clicked');
$("a").not(this).removeClass('clicked');
$(".current", this).stop().animate({
opacity: 1
}, {
duration: 100,
specialEasing: {
opacity: 'linear',
},
});
$(".current").not($(".current",this)).stop().animate({
opacity: 0
}, {
duration: 2000,
specialEasing: {
opacity: 'linear',
},
});
$panel.visible = true;
return false;
});
$(".close").click(function ()
{
$("#panel").slideUp("slow");
$panel.visible = false;
$(".current","#nav3").stop().animate({
opacity: 0
}, {
duration: 2000,
specialEasing: {
opacity: 'linear',
},
});
return false;
});
$("nav a").hover(
function() {
if(!$(this).hasClass('clicked')){
$(".current", this).stop().animate({
opacity: 1
}, {
duration: 300,
specialEasing: {
opacity: 'linear',
},
});
}
}, function() {
if(!$(this).hasClass('clicked')){
$(".current", this).stop().animate({
opacity: 0
}, {
duration: 2000,
specialEasing: {
opacity: 'linear',
},
});
}
});
$(window).trigger('hashchange');
});
HTML
<div class="nav-image"><img src="images/bodhi-leaf-brown.png"></div> <div class="current"><img src="images/bodhi-leaf-green.png"></div> <div class="text"><img src="images/home.png"></div> </a> </div>
<div class="nav-image"><img src="images/bodhi-leaf-brown.png" class="flip"></div> <div class="current"><img src="images/bodhi-leaf-green.png" class="flip"></div> <div class="text"><img src="images/about.png"></div> </a> </div><a href="index.html" class="" id="contact"> <div class="nav-image"><img src="images/bodhi-leaf-brown.png"></div> <div class="current"><img src="images/bodhi-leaf-green.png"></div> <div class="text"><img src="images/contact.png"></div> </a> </div>
CSS
nav {
width: 650px;
height: 170px;
position: absolute;
top: 100;
left: 200;
}
#nav1 {
position: absolute;
top: 0;
left: 120px;
}
#nav2 {
position: absolute;
top: 0;
left: 340px;
}
#nav3 {
position: absolute;
top: 0;
left: 560px;
}
.nav-image {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.current {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
opacity: 0;
}
【问题讨论】：
-
您能否更具体地说明为什么 CSS Tricks 上的那个不起作用？我看过它和你的网站，看起来它应该做你想做的事。 （除了代表，我很想重写它以包含页面上的其他链接。）
-
嗨。我让 CSS Tricks 脚本部分工作。两个主要问题如上所述，即我已经在每个页面上都有点击功能，用于打开和关闭联系表单以及更改链接上的类。所以我不确定如何将它与 CSS Tricks 脚本中的点击功能集成。然后，因为我的 index 和 about 页面的高度不同，在页面被调整为新内容的正确大小之前，内容已经淡入，因此我想知道改变效果的顺序。
-
啊，我很抱歉 - 当我尝试它时，我没有注意到顺序错误，但你是对的。我使用 CSS Tricks 代码在下面发布了一些希望可以工作的内容。
标签： jquery transition fade slide