Задать вопрос
@arttstyle
web-макака
javascript

Как показать / скрыть независимые блоки с анимацией?

Потихоньку осваиваю jquery... и получаю не то чего ожидал... получается jquery это всего-лишь прослойка для действий между html и css...
весь html и css должен быть задан, а jquery поможет этим красиво манипулировать...
но вот с реализацией следующей идеи возникли проблемы, я хочу чтобы:
в одной fullscreen секции возникли два div'a равноудаленно друг от друга прямо по центру экрана, с анимацией.
далее по нажатию на любой, div закрывается и всплывает другой или один плавно перетекает в другой. все это должно быть плавно, красиво и равноудаленно, по центру экрана. сейчас же я открываю div с помощью кода
$(document).ready(function() {
		$('div.left').show("slow")
		})

при этом мне приходится задавать изначально style="display:none", а т.к. два div'a расположены в ряд вся разметка начинает съезжать. и это всего 2 элемента, а что будет когда их станет 10 ?
скажите я вообще правильно мыслю, это на JQUERY и CSS делать надо или чистый JS учить?
или в этом конкретном случае нужно задавать position:absolute и играться с top и left ?
https://codepen.io/aptypkaa/pen/ExapxZV
  • Вопрос задан
  • 240 просмотров
3 комментария
Подписаться 1 Простой 3 комментария
Решения вопроса 1
@fixeri 
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

		body {
			margin:0;
			padding:0;
			font-family: "Montserrat", sans-serif;
			font-size: 25px;
		}
		#backjs {
		    position: fixed;
		    height: 100%;
		    width: 100%;
			display:flex;
			flex-direction:column;
		}

		.inner__block {
			display: none;
			background-image: linear-gradient(rgba(17,17,17,0.69),rgba(17,17,17,0.69));
		    width: 40%;
		    height: 450px;
		    margin-left: 50px;
		    margin-right: 50px;
		    border-radius: 20px;
		}

		.inner__block:first-child { display: block; }

		.inner {
			display: flex;
			justify-content:center;
			width:100%;

			margin-bottom:auto;
		}
		.heading {
			margin-top:auto;
			display:flex;
			justify-content:center;
			padding-bottom:15px;
		}
	</style>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
	<section id="backjs">
	<div class="heading"><H1>Heading</H1></div>
	<div class="inner">
		<div class="inner__block">1</div>
		<div class="inner__block">2</div>
		<div class="inner__block">3</div>
		<div class="inner__block">4</div>
		<div class="inner__block">5</div>
		<div class="inner__block">6</div>
		<div class="inner__block">7</div>
		<div class="inner__block">8</div>
		<div class="inner__block">9</div>
		<div class="inner__block">10</div>
	</div>
	</section>

	<script type="text/javascript">
		"use strict";

		const selectorNameBl = ".inner__block";
		const drTime = 1000;

		$(selectorNameBl).on("click", function() {
			let that = $(this);
			let next = $(this).next();

			that.fadeOut(drTime, function () {
				if (next.length !== 0) next.fadeIn(drTime);
				else $(`${selectorNameBl}:first-child`).fadeIn(drTime);
			});
		});

	</script>
</body>
</html>
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Jquery – это библиотека "write less do more" для javascript, создана специально для упрощения взаимодействия с DOM. Сейчас большинство "красивостей" делаются на css, а jquery, по сути, превратилась в инструмент манипуляции классами. Вот, примерчик набросал, меняются только классы, все анимации на чистом цсс:

Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создание кода страницы "Дерево предложений пользователей"
28 апр. 2024, в 11:58
1000 руб./за проект
Разработка Торгового помощника для терминала Тинькофф
28 апр. 2024, в 11:46
16000 руб./за проект
Ментор по nuxt.js
28 апр. 2024, в 11:41
1000 руб./в час
Ещё заказы