Dantes (обсуждение | вклад) Нет описания правки |
Dantes (обсуждение | вклад) Нет описания правки |
||
| Строка 1: | Строка 1: | ||
mw.loader.using('jquery', function () { | mw.loader.using('jquery', function() { | ||
$(function () { | $(function() { | ||
$('.faction-header').each(function () { | $('.faction-header').each(function() { | ||
$(this). | const $header = $(this); | ||
$ | const $list = $header.next('.faction-list'); | ||
const $arrow = $header.find('.arrow'); | |||
$list.data('is-open', false); | |||
$header.on('click', function() { | |||
const isOpen = !$list.data('is-open'); | |||
$arrow.css('transform', $list. | // Анимация стрелки | ||
$arrow.css('transform', isOpen ? 'rotate(180deg)' : 'rotate(0deg)'); | |||
// Анимация списка | |||
$list.stop().slideToggle({ | |||
duration: 300, | |||
start: function() { | |||
if (isOpen) { | |||
$(this).css('display', 'flex'); | |||
} | |||
} | |||
}); | |||
$list.find('.faction-item').each(function(index) { | |||
$(this).delay(50 * index).queue(function(next) { | |||
$(this).css({ | |||
opacity: isOpen ? 1 : 0, | |||
transform: isOpen ? 'translateY(0)' : 'translateY(-10px)' | |||
}); | |||
next(); | |||
}); | |||
}); | |||
$list.data('is-open', isOpen); | |||
}); | }); | ||
}); | }); | ||
}); | }); | ||
}); | }); | ||
Версия от 16:14, 8 мая 2025
mw.loader.using('jquery', function() {
$(function() {
$('.faction-header').each(function() {
const $header = $(this);
const $list = $header.next('.faction-list');
const $arrow = $header.find('.arrow');
$list.data('is-open', false);
$header.on('click', function() {
const isOpen = !$list.data('is-open');
// Анимация стрелки
$arrow.css('transform', isOpen ? 'rotate(180deg)' : 'rotate(0deg)');
// Анимация списка
$list.stop().slideToggle({
duration: 300,
start: function() {
if (isOpen) {
$(this).css('display', 'flex');
}
}
});
$list.find('.faction-item').each(function(index) {
$(this).delay(50 * index).queue(function(next) {
$(this).css({
opacity: isOpen ? 1 : 0,
transform: isOpen ? 'translateY(0)' : 'translateY(-10px)'
});
next();
});
});
$list.data('is-open', isOpen);
});
});
});
});