Использование jQuery slideToggle () без отображения: нет?

Question

Я пытаюсь использовать функцию slideToggle в jQuery, чтобы показать или скрыть панель, которая была скрыта с помощью позиции CSS, а не отображать: нет (так как это вызывает проблемы с картой Google в одной из моих панелей).

В данный момент я просто прячу и показываю панели вот так, но немного анимации было бы неплохо:

$('.panel').addClass('hidden');
$('.head > span').addClass('closed');

$('.head').click(function() { 
    $(this).next('.panel').toggleClass('hidden');
    $(this).children('span').toggleClass('open');
});

Есть идеи?

Answer 1

slideToggle анимирует высоту рассматриваемого элемента отдельно от видимости. Не уверен, как именно вы использовали CSS позицию, чтобы показать / скрыть ваши панели. Исходя из этого, вы должны создать собственную анимацию, используя функцию animate . Другим быстрым способом может быть

Для отображения элемента:

1. Скрыть элемент (используя jquery hide ())

2. Примените свой класс, чтобы показать элемент (т.е. отрегулировать его положение)

3. Теперь примените slideDown

Для сокрытия контента:

1. Apply slideUp - используйте функцию обратного вызова для выполнения шагов 2 и 3

2. Примените свой класс, чтобы скрыть элемент (т.е. отрегулировать его положение за пределами окна)

3. Показать элемент (используя jquery show ())

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

function customSlideToggle(e)
{
   var show = e.hasClass('hidden');
   if (show) {
     e.hide();
     e.removeClass('hidden')
     e.slideDown('slow');
   }
   else
   {
     e.slideUp('slow', function() {
        e.addclass('hidden');
        e.show();
     });
   }
}

Answer 2

slideToggle() является альтернативой toggle(), которая показывает / скрывает выбранные элементы в зависимости от текущего видимого состояния.

Вам вообще не нужно беспокоиться о классах, если вы просто пытаетесьзаставить анимацию работать.

Итак, попробуйте следующее, чтобы увидеть, что вы получите:

$(this).next('.panel').slideToggle();

Answer 3

Попробуйте это Пежолио

 $('.head').click(function() {
    $(this).next('.panel').slideToggle('slow', function() {
        $(this).toggleClass('hidden')
    });
    $(this).children('span').slideToggle('slow', function() {
        $(this).toggleClass('open')
    });
});​

вы можете комбинировать еще несколько эффектов slideUP, slideDown, slideToggle , а с помощью плагина замедления вы можете даже добавить плавности анимации

Вот пример

Html

<p class="text">
    test one<br />
    test one<br />
    test one<br />
    test one<br />
    test one<br />

</p>
<span class="more">show</span>​

Javascript

$(document).ready(function() {
    $('span.more').click(function() {
        $('p:eq(0)').slideToggle();
        $(this).hide();
    });
});​

CSS

.text{display:none}

живое демо

http://jsfiddle.net/gB6np/