Плавное появление блока
Добрый день!
Прошу помочь разобраться с обработкой клика: По сценарию необходимо, чтобы при клике на один из 4 блоков-кнопок плавно появлялся бы один большой информационный блок, в котором менялась бы информация в зависимости от того, на какой блок-кнопку изначально было нажато: Вот мои потуги: https://jsfiddle.net/2wf3b9pe/ Вроде даже работает, но выглядит как-то не изящно! К тому же плавность появления никак не получается. Интересует именно javascript без подключения библиотек. Пожалуйста, раскритикуйте!) |
|
Рони, спасибо огромное, вы мне очень помогли! Это даже больше, чем было нужно) Единственное, может Вы меня ещё ткнете куда-нибудь, где можно посмотреть варианты чтобы "плавно появлялся бы один большой информационный блок" при клике? Менять при клике свойство display не подходит, нужно, чтобы блок с содержимым выезжал как бы из ниоткуда)
|
<!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>
|
white_raven,
49 CSS Modal Windows |
Спасибо, товарищи - подсобили!)
|
Цитата:
Необходимо, чтобы слайдер появлялся при клике на любой label, не обязательно первый, а получается, что он начинает работать, если кликнуть только на первый. Не помогёте?( |
white_raven,
function sliderShow() {
slider[0].classList.add("slidesStart")
}
|
(( черт возьми, но почему!?
эх, тяжело в ученье( но большое Спасибо!! |
| Часовой пояс GMT +3, время: 10:42. |