JQuery fadeIn текст в меню аккордеона

Question

Ищете небольшую помощь в том, как заставить текст затухать в меню аккордеона. Более конкретно, при нажатии на элемент меню, я хочу, чтобы текст, который отображается под ним, исчезает и исчезает, когда это меню закрыто. Я новичок в JQuery, и хотя я понимаю основную концепцию, я не могу заставить ее работать с текущим кодом.

Пример: http://codepen.io/Sektion66/pen/ouclt

Любая помощь будет принята с благодарностью! Благодарю.

Answer 1

Мне удалось исправить мою оригинальную проблему с помощью комбинации CSS и JQuery.

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

Исправление ... Используя CSS, я сначала устанавливаю основную непрозрачность основной текстовой области на 0, а затем, когда нажимается элемент меню, он добавляет класс CSS, который будет исчезать в тексте, и при нажатии исчезать.

Так это самая основная форма:

CSS

.initialState { 
    opacity: 0; 
    transition: opacity 0.15s ease-in-out; 
} 

.fadeIn { 
    opacity: 1; 
    transition: opacity 1s ease-in-out; 
} 

JS

.slideDown().addClass("fadeIn"); 
.slideUp().removeClass("fadeIn"); 

Пример: http://codepen.io/Sektion66/pen/ouclt

Tha nks для помощи всем. Надеемся, что это меню Аккордеона пригодится для других, так что иди!

Answer 2

Заменить $allCells.slide(Up|Down) на $allCells.fade(In|Out). Теперь у вас есть другие проблемы, потому что вы используете большие селектора. Старайтесь избегать этого.

Answer 3

Вам необходимо зацепить activate(event, ui)event в управлении.

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

$(".selector").accordion({ 
    activate: function(event, ui) { ui.newPanel.fadeIn(); } 
}); 

Если портит с макета или рендеринга, то вам необходимо получить ссылку на текстовые элементы внутри newPanel объекта и исчезать их все явно.