Форум

LLIypuk · #1 (**permalink**) 11.10.2020, 21:21

Сделал себе блок в котором элементы меню появляются по очереди./
Код взял с сайта https://snipp.ru/jquery/show-turn (раздел "FadeIn – плавное появление").

Сам код:

$('.main-menu').click(function(){
		$('.shows div:eq(0)').fadeIn(300, function(){
			$(this).next().fadeIn(300, arguments.callee);
		});
	});

В итоге появление элементов работает отлично, однако не разобрался как сделать изчезновение этих элементов в обратном порядке при клике на тот же блок <div class="main-menu"></div>. Попытался вместо fadeIn написать fadeToggle, но пункты меню также начинают исчезать начиная с первого элемента, а не с последнего, что визуально совсем не то.

Nexus · #2 (**permalink**) 11.10.2020, 21:28

$('.main-menu').click(function(){
		$('.shows div:last').fadeOut(300, function(){
			$(this).prev().fadeOut(300, arguments.callee);
		});
	});

voraa · #3 (**permalink**) 11.10.2020, 22:02

Сообщение от Nexus

arguments.callee

Ужас!

$('.main-menu').click(function(){
        $('.shows div:last').fadeOut(300, function me (){
            $(this).prev().fadeOut(300, me);
        });
    });

LLIypuk · #4 (**permalink**) 11.10.2020, 22:34

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

рони · #5 (**permalink**) 11.10.2020, 23:17

LLIypuk,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .shows div {
	display: none;
	width: 100px;
	height: 100px;
	float: left;
    background-color: #FFCC66;
}
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
$(function() {
var show = 1;
$('.main-menu').click(function(){  console.log(show)
$('.shows div').stop(true, true);
if(show ^= 1){
$('.shows div:last').fadeOut(300, function me (){
            $(this).prev().fadeOut(300, me);
        });
}
else{
$('.shows div:eq(0)').fadeIn(300, function to(){
			$(this).next().fadeIn(300, to);
		});
}
    });

});
  </script>
</head>

<body>
<input name="" type="button" value="click" class="main-menu">
<div class="shows">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript