I have designed a simple website with a home and about page and a sliding contact form. You can see the site here.
我愿在指数和大约页之间增加一点。 我认为,最简单的解决办法是失败的,但贬低内容也可能看好。 我试图执行关于CSS tricks的活页文字,但可以推一下它与我已经建立的导航系统合作,其效果也不符合正确的秩序。 我认为,命令必须:
- Fade (or slide) out current page
- Alter height of page to fit new content
- Fade (or slide) in new page
我想知道,有人是否可以建议一种适当的方法,以实现我所期望的效果。
感谢
Nick
<><>ADDED
CLOSE BUTTON CLICK FUNCTION:
<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 );
});
<><><><>>><>>>>><>>>>>>
<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;
}