Когда я использую слайд-анимацию (в этом случае я использовал slideToggle), я заметил, что существует разница между скользящим заголовком div и нижним колонтитулом.
При сдвиге нижнего колонтитула содержимое (в данном случае h1) хорошо скользит вдоль фона. Это не относится к заголовку div. Кажется, что только фон движется, в то время как я хотел бы, чтобы заголовок скользил так же, как и нижний колонтитул.
Пожалуйста, просмотрите демо, которое я сделал на jsFiddle. Спасибо.
Вместо того, чтобы использовать .slideToggle(), что удобно, вы можете анимировать свойство элемента заголовка top, чтобы оно соскальзывало с экрана, а не меняло высоту.
Например, вы можете сохранить состояние заголовка с помощью .data() и анимировать заголовок с помощью .animate():
//set the initial state and bind click event handler
$('#toggleHeader').data('state', 0).bind('click',function(){
//if the header is showing
if ($(this).data('state') === 0) {
//set state to not showing
$(this).data('state', 1);
//animate header element out-of-view
$('#header').stop(true).animate({ top : -102 });
} else {
//set state to showing
$(this).data('state', 0);
//animate header element into view
$('#header').stop(true).animate({ top : 0 });
}
});
Вот демонстрационная версия: http://jsfiddle.net/xhFz7/3/
Исправление Jasper работает, но объяснение ThatSteveGuy также верно. Чтобы исправить проблему, используя аргументы ThatSteveGuy и сохраняя все свой старый код, добавьте это в CSS:
#header h1 {
position:absolute;
text-align:center;
width:100%;
margin:0px;
bottom:40px;
}
как показано здесь http://jsfiddle.net/xhFz7/58/
Событие переключения - это, по сути, специализированное событие click. Вы можете прочитать документацию здесь: http://docs.jquery.com/Events/toggle
Итак, вы можете создать анимацию переключения так:
$('#toggleHeader').toggle(function() {
$('#header').animate({top: "-102px"});
}, function() {
$('#header').animate({top: "0px"});
}
);
Вы можете увидеть мою скрипку здесь: http://jsfiddle.net/xhFz7/43/
Решение состоит в том, чтобы анимировать не высоту (поведение по умолчанию slideToggle), а marginTop или top (с относительной или абсолютной позицией).
$(document).ready(function(){
$('#toggleHeader').bind('click',function(){
$('#header').marginTopToggle();
});
$('#toggleFooter').bind('click',function(){
$('#footer').slideToggle();
});
});
$.fn.marginTopToggle = function(time) {
time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
if(parseInt($(this).css("margin-top")) == 0) {
$(this).animate({"margin-top": "-" + $(this).outerHeight() + "px"}, time );
} else {
$(this).animate({"margin-top": 0}, time );
}
}
Он независим от высоты и работает со стандартными скоростями jQuery:
Вы также можете позиционировать текст в заголовке относительно его нижней части, и это тоже будет работать.
Попробуйте это.
$(document).ready(function() {
$('#toggleHeader').bind('click', function() {
var header = $('#header'), //cached for repeated use
height = header.outerHeight(),
anims = {
slideUp: function() {
header.stop().animate({'top': -(height) + 'px'}, 500, function() {
header.hide();
});
},
slideDown: function() {
header.stop().show().animate({'top': '0px'}, 500);
}
};
(header.is(':visible')) ? anims.slideUp() : anims.slideDown();
});
$('#toggleFooter').bind('click', function() {
$('#footer').slideToggle();
});
});
slideToggle оживляет высоту и переводит переполнение в скрытое. Элементы children (h1), как стандартное поведение, расположены в верхней части своего родителя. Когда родитель сжимается, они остаются наверху, вызывая другой эффект для верхнего и нижнего колонтитула.
Обернув дополнительный блок с фиксированной высотой вокруг содержимого заголовка и разместив его в снизу заголовка, содержимое будет увеличиваться, когда этот квадрат сжимается по высоте.