jQuery slideDown по сравнению с jQuery UI .show ('слайд')

Question

jQuery slideDown по сравнению с jQuery UI .show ('слайд')

Я пытаюсь использовать jQuery, создал в действительности функциональность для создания "секции", которая скользит из позади панели навигации, продвигая содержание ниже его из пути.

Если я использую $('#drawer').slideDown(), содержание продвинуто из пути, но содержание на самом деле "не скатывается". Это - больше очистки для раскрытия содержания.

Если я использую $('#drawer').show('slide',{direction:'up'}), содержание правильно скатывается, но все содержание ниже элемента выпрыгивает из пути, прежде чем эффект произойдет.

Есть ли способ объединить лучший из обоих из них для тиражирования эффекта, который я ищу: секция, которая выскальзывает, продвигая содержание ниже его из пути?

Я исследовал jQuery UI .animate() функция, но документация бесполезна. Мои сырые усилия использовать его были чреваты отказом.

И, в случае, если любой спрашивает, извините, что я не могу показать пример, но мы хотели бы, чтобы он функционировал как плагин Секции jQuery:

http://lib.metatype.jp/jquery_drawer/sample.html

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

ОБНОВЛЕНИЕ: Я также попробовал эту часть кода через плагин Секции jQuery, но это не анимирует вообще:

$('#drawer').css({ marginTop: $('#drawer').height() * -1 }).animate({ marginTop: 0 });

Разъяснить также это называют в функции OpenDrawer() это называют таким образом:

$(document).ready(function() {
    OpenDrawer();
});

Поскольку по умолчанию это загрузится, когда страница загрузится.

8

javascript jquery jquery-ui

задан Ben Dyer 6 January 2010 в 21:07

3 ответа

Другие вопросы по тегам:

javascript jquery jquery-ui

Похожие вопросы:

score 0 · Answer 1

[

]Да, это похоже на поведение аккордеона, за исключением того, что вы также можете сдвинуть его вверх. Я использовал эту функциональность, чтобы создать то, что вы ищете.[

] [

][]$('#drawer').slideDown('slow');[][

] [

]Изменяя скорость, вы можете получить разные скорости слайдов, чтобы они выглядели так, как вы хотите. Теперь, несмотря на то, что у вас есть элемент ящика, вам нужен изначально скрытый контейнер, который и будет скользить. Допустим, у вас есть кнопка с идентификатором "drawer" и контейнер с идентификатором "myDrawerContent". Вы бы сделали следующее,[

] [

$('#drawer').click(function() {
    $('#myDrawerContent').slideDown('slow');
}

] [

$('#drw_loader').animate({ 
    height: $('#drw_ajax').height() }, 
    function () { $('#drw_loader').fadeOut(function () { $('#drw_ajax').fadeIn(); });
});

] [

]Надеюсь, это поможет.[

] [

]Метрополис[

]

score 1 · Answer 2

javascript, который у вас есть в вопросе обновления, работает, но он должен работать с элементом, содержащим ваше содержимое, а не с самим содержимым.

Чтобы увидеть это в действии, окружите элемент #drawer другим div:

<div id='container'>
    <div id='drawer'>...</div>
<div>

И анимируйте контейнер:

$('#container')
    .css({ marginTop: $('#container').height() * -1 })
    .animate({ marginTop: 0 });

score 8 · Answer 3

Думаю, вы ищете эффект, больше похожий на «слепой»:

$('#drawer').show('blind');

Странно, что $ .fn.slideDown () и $ .fn.show ('slide') работают по-разному, а скорее «слепой». 'slide' создает заполнитель размером с ваш объект, а затем скользит в рамку просмотра, а слепой регулирует высоту или ширину вашего элемента до тех пор, пока он не расширится до правильного размера (в то время как для переполнения установлено значение скрыто). На самом деле имена эффектов правильные, но есть некоторая путаница из-за устаревшего имени $ .fn.slideDown ().