Появление и исчезновение элементов по очереди
Сделал себе блок в котором элементы меню появляются по очереди./
Код взял с сайта 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, но пункты меню также начинают исчезать начиная с первого элемента, а не с последнего, что визуально совсем не то. |
$('.main-menu').click(function(){
$('.shows div:last').fadeOut(300, function(){
$(this).prev().fadeOut(300, arguments.callee);
});
});
|
Цитата:
$('.main-menu').click(function(){
$('.shows div:last').fadeOut(300, function me (){
$(this).prev().fadeOut(300, me);
});
});
|
Спасибо за ответы, но полученный код в итоге работает не совсем корректно.
При запуске события первый элемент появляется и сразу исчезает, а оставшиеся появляются в обычном порядке. При закрытии блока в хаотичном порядке исчезают все элементы кроме последнего. |
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>
|
| Часовой пояс GMT +3, время: 20:21. |