jquery slideToggle, действующий больше как слепой - PullRequest
Новая
       18

jquery slideToggle, действующий больше как слепой

1 голос
/ 21 февраля 2010

Я пытаюсь заставить мой скользящий элемент работать правильно с slideToggle . Во-первых, вот рабочий URL: * Ссылка удалена

Проблема, с которой я сталкиваюсь, заключается в том, что я получаю больше слепого эффекта, чем скользящего эффекта. Я пытался изменить CSS и использовать отрицательное верхнее поле и т. Д. Безрезультатно. То, что я пытаюсь сделать, в основном совпадает с меню Продукты на telerik-dot-com и меню Все продукты с сайта. Тот, что в aspnet-ajax / controls / examples / default / , больше связан с тем, что я пытаюсь сделать с помощью функции click. Я понимаю, что они могут отличаться, но то, что я в основном ищу по функциональности, это div, чтобы сделать больше слайда вместо слепого.

Спасибо за любую помощь.

Кроме того, чтобы добавить к этому, я бы хотел добавить фактическое содержимое панели, как только панель вставится, затем исчезнет, ​​если щелкнуть вкладку, чтобы закрыть панель перед тем, как сдвинуть ее вверх. Я пытался добавить функцию fadeIn в h2 и p, но не повезло. Если кто-то хочет присоединиться к этому, не стесняйтесь. Спасибо!

1 Ответ

1 голос
/ 21 февраля 2010

Ваш css должен выглядеть так, как показано ниже, атрибут top может быть либо рассчитан при загрузке страницы, либо вы задаете фиксированное значение. 

#slidebox {
    margin:0;
    padding:0;
    position:absolute;
    right:40px;
    top:-141px; /*this is the trick*/
    width:auto;
    z-index:100;
}

тогда на вашем js вам нужно сделать, как субтенант говорит, играя с атрибутом top. 

var $a = $('a.btn-slide'),
    $slider = $('#slidebox');

$a.click(function(){
   if($a.hasClass('active')){
     $slider.animate({'top':0},400,function(){
        $a.removeClass('active');
     });
   }else{ 
     $slider.animate({'top':'-141px'},400,function(){
        $a.addClass('active');
     });
   }
})

надеюсь, это поможет, Синан.

...