Как добавить эффект скольжения на верхнюю панель Jquery

#jquery #sliding

#jquery ( jquery ) #скользящий

Вопрос:

Я использую выпадающую верхнюю панель. Что-то похожее на это http://www.yootheme.com/tools/extensions/yootoppanel

Изначально это было в mootools. Но у меня были проблемы в IE8. Поэтому я решил сменить его на Jquery. Я создал функции slidedown и slide up. Но я не могу добавить эффект скольжения. Что касается кодирования, я вызвал функцию при событии нажатия кнопки. Который добавляет высоту, положение и т.д. при скольжении вниз и удаляет их при скольжении вверх.

 function toggle(articleheight,height) {
        if(height < 0){
        slideIn(articleheight);
        }
    else{
        slideOut(articleheight);
        }
     }
function slideIn(articleheight){
    jQuery(".panel").css("margin-top",0);
    jQuery(".panel-wrapper").css("height",articleheight);

}
function slideOut(articleheight){
    jQuery(".panel").css("margin-top",-articleheight);
    jQuery(".panel-wrapper").css("height",0);

}

Мой HTML-код

 <div id="toppanel" class="toppanel">

        <div class="panel-container">
            <div class="panel-wrapper">
                <div class="panel">
                    <div class="content">
                        MY CONTENT
                    </div>
                </div>
            </div>

            <div class="trigger" style="<?php echo $css_left_position ?>">
                <div class="trigger-l"></div>
                <div class="trigger-m">Panel</div>
                <div class="trigger-r"></div>
            </div>
        </div>

    </div>

Пожалуйста, помогите

Ответ №1:

Я бы подумал об использовании эффектов скольжения jQuery

Примеры включены в справочник по api

http://api.jquery.com/category/effects/sliding/

Я добавил быстрый пример, вы можете легко сделать переменную высоты:

http://jsfiddle.net/dmpWa/19/

1. Это не ответ на вопрос.

2. Спасибо за ответ. Могу ли я использовать там высоту? Я проверю это.

3. Это работает. Просто проблема в том, что при первом щелчке он сначала скользит вниз, а затем быстро скользит вверх.

4. да, он автоматически скользит вверх при первом щелчке после скольжения вниз. Однако он работает для 2-го и последующих кликов.

5. Трудно понять, что происходит, но я смог воссоздать вашу ошибку, для меня это происходит, когда я удаляю ‘display: none;’ на панели-оболочке div. Это может быть вашей проблемой

Ответ №2:

Как и предполагалось, эффект слайда. jsFiddle Если вы переходите с mootools на jquery, возможно, вам захочется перестать беспокоиться о десятке функций. Простой декларативный jquery убьет простые вещи, подобные этой.

 <div class="topPanel"></div>
<div class="topTab"><a href="#">Top Panel</a></div>

…

 $('.topTab a').toggle(function(){
    $(this).parent().prevUntil('.topTab').slideDown();
},function(){
    $(this).parent().prevUntil('.topTab').slideUp();
});