Если вы хотите придерживаться кода CSS Tricks, я думаю, что можно настроить его для вас.
Порядок анимации
Я не заметил, когда попробовал сначала, но - вы правы - исчезновение, исчезновение нового контента, затем настройкаПорядок анимации высоты довольно глупый.Вы можете заставить его делать то, что вы хотите, изменив порядок анимации
$pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }, function () { $mainContent.fadeIn(200); });
Форма контакта
Вы можете исключить форму контакта из запуска хэш-обмена, так какв частности, о том, что включать в делегат, например (для идентификатора ссылки #contact)
$("nav").delegate("a:not(#contact)", "click", function () { ... }
Это может или не может делать то, что вы хотите, например, вы можете на самом деле хотите, чтобы форма контакта добавила хэшчтобы люди могли ссылаться на него.В этом случае вы можете добавить if в событие hashchange для проверки на #contact (или что-то еще).
Редактировать
Следуя приведенным ниже комментариям, этот код dynamicpage.js устанавливает $pageWrap высоту в автоматический режим после анимации (так работает контакт), а также пересчитывает высотыкогда используется для разрешения изменений страницы, когда видна контактная форма.
Редактировать 2
Для плавной прокрутки вверх, когда видна контактная форма и исчезают ссылки.Форма контакта не прокручивалась плавно, потому что вы сохранили ее исходную (расширенную) высоту в hashChange и отрегулировали относительно нее.Как только анимация закончилась и фиксированная высота была удалена с помощью CSS, она подпрыгнула до гораздо меньшей текущей высоты.Я добавил немного кода, который регулирует высоту, если контактная форма должна быть скрыта.
Ссылки исчезают, потому что они находятся в #guts div (и, действительно, внутри раздела #main-content, который действительно исчезает. Если вы переместите их за пределы этого, все станет лучше. К сожалению, они делаютзатем начните прыгать в промежуток между удаляемым старым #guts контентом и новым добавляемым материалом, так что вы можете использовать немного CSS, как показано ниже, чтобы обойти это.
Я не думаю, что этоЭто отличное решение. На вашем месте я бы скрыл содержимое, анимировал #guts до новой высоты, а затем добавил бы содержимое, чтобы #guts никогда не терял свою высоту CSS-набора. Использование animate такжеПозволяет ставить в очередь анимации, которые могут иногда вызывать проблемы, если вы нажимаете слишком быстро.
$(function ()
{
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el,
$panel = $("#panel");
$panel.visible = false;
$("nav").delegate("a", "click", function ()
{
window.location.hash = $(this).attr("href");
return 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 a").removeClass("current");
$("nav a[href=\"" + newHash + "\"]").addClass("current");
});
});
};
});
$("#contact").click(function ()
{
$("#panel").slideDown("slow");
$(this).addClass("current");
$("#home, #about").removeClass("current");
$panel.visible = true;
return false;
});
$(".close").click(function ()
{
$("#panel").slideUp("slow");
$(curTab).addClass("current");
$("#contact").removeClass("current");
$panel.visible = false;
return false;
});
$(window).trigger('hashchange');
});
CSS
#nav-bottom {
margin: -15px 0 15px -100px;
position: absolute;
bottom: 0;
left: 50%;
width: 200px;
}