JQuery переключение div видимости - PullRequest
Новая
       37

JQuery переключение div видимости

1 голос
/ 18 марта 2010

У меня есть HTML-документ со следующими настройками: 

<div class="main-div" style="padding: 5px; border: 1px solid green;">

    <div class="first-div" style="width: 200px; height: 200px; padding: 5px; border: 1px solid purple">
      First Div
      <a href="#" class="control">Control</a>
    </div>
    <div class="second-div hidden" style="width: 200px; height: 200px; padding: 5px; border: 1px solid red;">
      Second Div
      <a href="#" class="control">Control</a>

    </div>

  </div>

У меня также есть настройка класса CSS под названием hidden с настройкой отображения на ноль.

У меня есть настройки jQuery так: 

$('.control').click(function(){

    var master = $(this).parent().parent();
    var first_div = $(master).find(".first-div");
    var second_div = $(master).find(".second-div");

    $(first_div).toggleClass("hidden")
    $(second_div).toggleClass("hidden")

  });

Эта настройка переключает видимость div, нажимает кнопку управления, скрывает один div и показывает другой.

Однако это просто скрывает и показывает каждый div в мгновение ока. Я хочу добавить анимацию к переходу div, может быть, один слайд вверх, а другой - вниз, когда нажимается «элемент управления», и наоборот, но я не могу этого достичь.

Может ли кто-нибудь помочь и дать совет, как это сделать?

Cheer

Eef

Ответы [ 2 ]

2 голосов
/ 18 марта 2010

Вместо того, чтобы использовать jQuery для изменения класса ваших элементов и полагаться на CSS, чтобы скрыть их, я бы посоветовал вам использовать jQuery Effects для постепенного исчезновения / скольжения / ослепления ваших элементов в поле зрения и вне его.

0 голосов
/ 18 марта 2010

То, что вы описываете, называется аккордеоном . Если вы хотите использовать jQuery UI , есть встроенная поддержка аккордеонов. Проверьте аккордеон демо на сайте. Вы можете скачать библиотеку и посмотреть, как она работает. Это даст вам представление о том, как реализовать этот тип функциональности, если вы хотите попробовать сделать это самостоятельно.

...