Разница в слайд-анимации заголовка и нижнего колонтитула

Ответ 1

Вместо того, чтобы использовать .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/

Ответ 2

Исправление Jasper работает, но объяснение ThatSteveGuy также верно. Чтобы исправить проблему, используя аргументы ThatSteveGuy и сохраняя все свой старый код, добавьте это в CSS:

#header h1 {
  position:absolute;
  text-align:center;
  width:100%;
  margin:0px;
  bottom:40px;
}

как показано здесь http://jsfiddle.net/xhFz7/58/

Ответ 3

Событие переключения - это, по сути, специализированное событие click. Вы можете прочитать документацию здесь: http://docs.jquery.com/Events/toggle

Итак, вы можете создать анимацию переключения так:

$('#toggleHeader').toggle(function() {
    $('#header').animate({top: "-102px"});
    }, function() {
        $('#header').animate({top: "0px"});
    }
);

Вы можете увидеть мою скрипку здесь: http://jsfiddle.net/xhFz7/43/

Ответ 4

Решение состоит в том, чтобы анимировать не высоту (поведение по умолчанию 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:

http://jsfiddle.net/xhFz7/13/

Вы также можете позиционировать текст в заголовке относительно его нижней части, и это тоже будет работать.

http://jsfiddle.net/xhFz7/14/

Ответ 5

Попробуйте это.

$(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();
    });
});​

http://jsfiddle.net/HXD2G/1/

Ответ 6

slideToggle оживляет высоту и переводит переполнение в скрытое. Элементы children (h1), как стандартное поведение, расположены в верхней части своего родителя. Когда родитель сжимается, они остаются наверху, вызывая другой эффект для верхнего и нижнего колонтитула.

Обернув дополнительный блок с фиксированной высотой вокруг содержимого заголовка и разместив его в снизу заголовка, содержимое будет увеличиваться, когда этот квадрат сжимается по высоте.

http://jsfiddle.net/willemvb/2CSPR/