Как добавить скользящий эффект в верхнюю панель Jquery - PullRequest
Новая
       27

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

0 голосов
/ 24 октября 2011

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

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

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>

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

Ответы [ 2 ]

1 голос
/ 24 октября 2011

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

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

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

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

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

0 голосов
/ 24 октября 2011

Как и предполагалось, эффект слайда. 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();
});
...