Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.10.2020, 22:21
Аспирант
Отправить личное сообщение для LLIypuk Посмотреть профиль Найти все сообщения от LLIypuk
 
Регистрация: 24.07.2015
Сообщений: 48

Появление и исчезновение элементов по очереди
Сделал себе блок в котором элементы меню появляются по очереди./
Код взял с сайта 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, но пункты меню также начинают исчезать начиная с первого элемента, а не с последнего, что визуально совсем не то.
Ответить с цитированием
  #2 (permalink)  
Старый 11.10.2020, 22:28
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,391

$('.main-menu').click(function(){
		$('.shows div:last').fadeOut(300, function(){
			$(this).prev().fadeOut(300, arguments.callee);
		});
	});
Ответить с цитированием
  #3 (permalink)  
Старый 11.10.2020, 23:02
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 713

Сообщение от Nexus
arguments.callee
Ужас!
$('.main-menu').click(function(){
        $('.shows div:last').fadeOut(300, function me (){
            $(this).prev().fadeOut(300, me);
        });
    });
Ответить с цитированием
  #4 (permalink)  
Старый 11.10.2020, 23:34
Аспирант
Отправить личное сообщение для LLIypuk Посмотреть профиль Найти все сообщения от LLIypuk
 
Регистрация: 24.07.2015
Сообщений: 48

Спасибо за ответы, но полученный код в итоге работает не совсем корректно.
При запуске события первый элемент появляется и сразу исчезает, а оставшиеся появляются в обычном порядке.
При закрытии блока в хаотичном порядке исчезают все элементы кроме последнего.
Ответить с цитированием
  #5 (permalink)  
Старый 12.10.2020, 00:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,260

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поочередное появление элементов zhenia3003 Общие вопросы Javascript 3 15.07.2020 12:02
Появление и исчезновение картинок Lefseq Общие вопросы Javascript 4 04.05.2019 20:38
Появление и исчезновение блока AllanZ jQuery 4 25.07.2012 17:12
Плавное исчезновение и появление изображения Surlik jQuery 9 17.03.2012 13:27
Поочередное появление элементов <tr> gromitsu jQuery 3 27.11.2011 20:20