Анимация нижнего колонтитула и JQuery? - PullRequest
Новая
       6

Анимация нижнего колонтитула и JQuery?

1 голос
/ 29 ноября 2010

У меня есть нижний колонтитул, который я сохраняю внизу страницы, используя липкий нижний колонтитул css .Мне бы хотелось, чтобы мой нижний колонтитул начал сворачиваться, и когда пользователь нажимает на кнопку, я хочу, чтобы он развернулся и затем поменял ссылку «развернуть» на другой контейнер div внутри нижнего колонтитула div.

Как бы мне этого добиться с помощью jQuery, HTML и CSS?

РЕДАКТИРОВАТЬ:

Я хочу, чтобы нижний колонтитул начинался с высоты около 20 пикселей.В нижнем колонтитуле должна быть кнопка (ссылка, я думаю), которая говорит «больше» или «о».Когда пользователь щелкает, нижний колонтитул должен становиться выше и показывать более сложный элемент div с альтернативным содержимым (а не со ссылкой «more»).

1 Ответ

5 голосов
/ 29 ноября 2010

Этот jsFiddle демонстрирует базовый подход к слайду.

Вот краткое изложение того, что вы там найдете:

  1. Создайте свой CSS так, чтобы начальная высота нижнего колонтитула равнялась 0. Убедитесь, что вы обнулили и другие CSSзначения, которые зависят от высоты нижнего колонтитула (а именно padding-bottom на #main и margin-top на #footer).Вам также нужно установить overflow:hidden на #footer, чтобы гарантировать, что содержимое нижнего колонтитула будет невидимым при его свертывании.

  2. в обработчике click() для вашегоlink, используйте функцию jQuery animate(), чтобы увеличить высоту #footer (и одновременно выполнить другие необходимые корректировки отступов / полей).

  3. функция animate() принимает четыре параметра ( см. Документы здесь ), последний является обратным вызовом, который сработает после завершения анимации.Вы можете запустить обмен ссылками из этой функции обратного вызова.

Итак, если вы начинаете с HTML / CSS из CSSStickyFooter , остальныекод будет выглядеть примерно так:

Ваш CSS (это после stickyfooter css): 

#main { 
    padding-bottom: 0; 
}  
#footer { 
    margin-top: 0;
    height: 0; 
    overflow:hidden;
}

И ваш Javascript будет выглядеть так:

$(document).ready(function(){
    $('#showFooter').click(function(evt) {
        $('#footer').animate({
            'margin-top' : -150,
            'height' : 150
        }, null, null, function() {
            alert("footer slide-in is complete.");
            // do your "link swap" operation (whatever it is) right here. 
        });
        $('#main').animate({
            'padding-bottom' : 150
        });
    });
});

Редактировать: , если вы хотите, чтобы нижний колонтитул был виден изначально (при небольшом размере), а затем «выдвиньте» его на больший размер, просто установителюбую высоту, которую вы хотите (вместо 0) в CSS, который я показал выше.

Вы можете поместить любой контент, который вам нравится, в div нижнего колонтитула - поэтому, если вы хотите показать один набор контента, когда он маленький, и другой контент, когда он большой, просто поместите эти блоки в два отдельных блока,в нижнем колонтитуле.установите их position:absolute;top:0;, чтобы они находились друг над другом в нижнем колонтитуле.вначале установите «расширенный вид» равным display:none, а затем используйте функции jquery fadeIn() и fadeOut() в обработчике кликов (или обратном вызове animate), чтобы поменять видимость развернутых и свернутых видов в нижнем колонтитуле.

Вот пример jsFiddle, скорректированный соответствующим образом

Теперь, если вы действительно хотите стать модным, вы можете сделать высоту нижнего колонтитула зависимой от высотыдва разных представления контента.(Это, вероятно, то, что я бы сделал).

вот "причудливый" jsFiddle, который вычисляет высоты от содержания

Редактировать: Если вы поменяете местами порядок двух анимационных вызовов (например, $('#main').animate(...) предшествует $('#footer').animate(...)), анимация будет работать более плавно, и полоса прокрутки не будет мигать во время анимации.(Я должен был показать это так изначально). вот обновленный jsFiddle, который показывает это незначительное изменение .

...