Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.09.2017, 01:12
Интересующийся
Отправить личное сообщение для white_raven Посмотреть профиль Найти все сообщения от white_raven
 
Регистрация: 23.11.2016
Сообщений: 19

Плавное появление блока
Добрый день!
Прошу помочь разобраться с обработкой клика:
По сценарию необходимо, чтобы при клике на один из 4 блоков-кнопок плавно появлялся бы один большой информационный блок, в котором менялась бы информация в зависимости от того, на какой блок-кнопку изначально было нажато:
Вот мои потуги:
https://jsfiddle.net/2wf3b9pe/
Вроде даже работает, но выглядит как-то не изящно!
К тому же плавность появления никак не получается.
Интересует именно javascript без подключения библиотек.
Пожалуйста, раскритикуйте!)
Ответить с цитированием
  #2 (permalink)  
Старый 08.09.2017, 01:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,274

white_raven,
https://javascript.ru/forum/dom-wind...tml#post451649
Ответить с цитированием
  #3 (permalink)  
Старый 15.09.2017, 23:36
Интересующийся
Отправить личное сообщение для white_raven Посмотреть профиль Найти все сообщения от white_raven
 
Регистрация: 23.11.2016
Сообщений: 19

Рони, спасибо огромное, вы мне очень помогли! Это даже больше, чем было нужно) Единственное, может Вы меня ещё ткнете куда-нибудь, где можно посмотреть варианты чтобы "плавно появлялся бы один большой информационный блок" при клике? Менять при клике свойство display не подходит, нужно, чтобы блок с содержимым выезжал как бы из ниоткуда)
Ответить с цитированием
  #4 (permalink)  
Старый 15.09.2017, 23:52
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.block{
			width: 300px;
			height: 0;
			overflow: hidden;
			opacity: 0;
			transition: 2s;
		}
		.active{
			opacity: 1;
			height: 150px;
		}
	</style>
</head>
<body>
	<button>клик</button>
	<div class="block">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал свое даже проектах lorem, путь предложения злых текст на берегу ipsum, журчит скатился своих алфавит путь вершину ведущими свой живет.</div>
	<script>
		document.querySelector('button').onclick=function(){
			document.querySelector('.block').classList.add('active');
		};
	</script>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 16.09.2017, 00:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,274

white_raven,
49 CSS Modal Windows
Ответить с цитированием
  #6 (permalink)  
Старый 19.09.2017, 20:13
Интересующийся
Отправить личное сообщение для white_raven Посмотреть профиль Найти все сообщения от white_raven
 
Регистрация: 23.11.2016
Сообщений: 19

Спасибо, товарищи - подсобили!)
Ответить с цитированием
  #7 (permalink)  
Старый 19.09.2017, 20:33
Интересующийся
Отправить личное сообщение для white_raven Посмотреть профиль Найти все сообщения от white_raven
 
Регистрация: 23.11.2016
Сообщений: 19

Сообщение от рони Посмотреть сообщение
white_raven,
https://javascript.ru/forum/dom-wind...tml#post451649
Но вот, Профессор, не подскажете ещё такой момент - мною была предпринята попытка изменить немного Ваш пример со слайдером https://jsfiddle.net/a54spqqs/
Необходимо, чтобы слайдер появлялся при клике на любой label, не обязательно первый, а получается, что он начинает работать, если кликнуть только на первый. Не помогёте?(
Ответить с цитированием
  #8 (permalink)  
Старый 19.09.2017, 21:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,274

white_raven,
function sliderShow() {
            slider[0].classList.add("slidesStart")
        }
Ответить с цитированием
  #9 (permalink)  
Старый 19.09.2017, 22:12
Интересующийся
Отправить личное сообщение для white_raven Посмотреть профиль Найти все сообщения от white_raven
 
Регистрация: 23.11.2016
Сообщений: 19

(( черт возьми, но почему!?
эх, тяжело в ученье(
но большое Спасибо!!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное появление блока. maxg5 jQuery 11 26.06.2017 23:12
Появление блока по наведению Batyabest Events/DOM/Window 4 01.07.2015 20:47
Плавное раскрытие и сворачивание блока StyLLeR jQuery 6 07.07.2014 15:00
Плавное исчезновение и появление изображения Surlik jQuery 9 17.03.2012 12:27
Как сделать плавное появление ? saturn Элементы интерфейса 5 12.11.2011 01:16