Как я могу исчезать события-переключатели?

У меня есть следующий jQuery

$(".dropdown-menu-1").click(function() {
  $(".submenu-1").toggleClass("visible").removeClass(function() {
    $(".submenu-2").removeClass("visible"),
    $(".submenu-3").removeClass("visible");
  });
}),
$(".dropdown-menu-2").click(function() {
  $(".submenu-2").toggleClass("visible").fadeIn().removeClass(function() {
    $(".submenu-1").removeClass("visible"),
    $(".submenu-3").removeClass("visible");
  });
}),
$(".dropdown-menu-3").click(function() {
  $(".submenu-3").toggleClass("visible").removeClass(function() {
    $(".submenu-1").removeClass("visible"),
    $(".submenu-2").removeClass("visible");
  });
})

Вопрос в том, как я могу скрыть эти события toggleClass? Как видите, я попробовал это с "fadeIn()", но это приводит только к ошибке, так что я могу что-то упустить.

Есть «возможный дубликат» моего вопроса, в котором говорится об использовании jQueryUI, что я и сделал. Это не решило мою проблему. Теперь элементам требуется больше времени, чтобы стать видимыми, но нет анимации затухания.

У кого-нибудь из вас есть идеи по этому поводу?

Спасибо!


jquery fadein toggleclass
person Atr_Max    schedule 03.09.2015    source источник
comment
возможный дубликат jQuery: как исчезать между классами?   -  person Hexaholic    schedule 03.09.2015
comment
@Hexaholic, к сожалению, это не помогло, см. Мое редактирование.   -  person Atr_Max    schedule 03.09.2015

Ответы (2)


arrow_upward
0
arrow_downward

У вас есть определенные правила CSS в классе .visible? Этого должно быть достаточно для ваших нужд:

$(".dropdown-menu-1").click(function() {
    $(".visible").fadeOut().removeClass("visible");
    $(".submenu-1").fadeIn().addClass("visible");
});
...
person EdenSource    schedule 03.09.2015
comment
его единственный дисплей: блок; - person Atr_Max; 03.09.2015
comment
Затухание работает. Единственная проблема в том, что другие элементы больше не исчезают. Есть ли способ сделать это с помощью вашего аккуратного решения или мне нужно строго удалить класс двух других элементов? - person Atr_Max; 03.09.2015
comment
Вы правы, забыли .fadeOut(), смотрите обновленный ответ. - person EdenSource; 03.09.2015
comment
Это действительно сработало. Однако исчезающие элементы сталкиваются друг с другом, создавая короткую утечку меню. Я думаю, это еще одна проблема, которую я должен решить. - person Atr_Max; 03.09.2015
comment
Вы можете предоставить CSS и HTML? - person EdenSource; 03.09.2015
comment
Нет, все заработало нормально, когда я изменил FadeOut() на FadeOut(1) и FadeIn() на FadeIn(250). :) - person Atr_Max; 03.09.2015

arrow_upward
0
arrow_downward

вы можете использовать функцию анимации jquery... она более продвинутая... но я думаю, вы можете изменить логику своего кода... вот документация функции jquery http://api.jquery.com/animate/ вы можете использовать функцию анимации, как в приведенном ниже коде:

 $("#sliding_div1").animate({ paddingTop: '300px'},200);

функция анимации имеет много свойств, см. документацию

person amir bayan    schedule 03.09.2015