У меня есть div, с данным height, который переходит на более крупный height с помощью jQuery. Переход на более высокий div сглажен с transition элемент. Начиная с div переход на расширение составляет linear, с задержкой 0,5 с, я также использую transition для сдвига 7 строк текста от opacity: 0 до opacity:1. Тем не менее, я хочу, чтобы этот переход проходил сверху вниз (строка 1 немного быстрее, чем строка 2, немного быстрее, чем строка 3 и т. Д.), После перехода div вместо всех строк сразу. Как это сделать? Код ниже:Текст непрозрачности перехода сверху вниз
$("small").on("click", function() {
$(".post1").toggleClass("show-post");
});
.post1 {
border: 1px solid grey;
margin: 20px auto;
width:33%;
height:125px;
padding:0 10px;
border-radius:4px;
background:#FFFFFF;
color:black;
transition: height 0.5s;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
}
.descr {
opacity:0;
}
small {
position:relative;
left:300px;
bottom:30px;
}
.show-post {
height:350px;
}
.show-post .descr{
opacity:1;
transition:opacity 1s linear;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="post1">
<h4>THis is a concert</h4>
<p>Where: XYZ Arena</p>
<p>When: XYZ h</p>
<small>(Click to expand)</small>
<p class="descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Update:
Теперь мой код выглядит следующим образом:
<script>
$("small").on("click", function() {
$(this).parent().toggleClass("show-post");
$(".first").animate({'opacity':1}, 1000);
$(".second").animate({'opacity':1}, 2000);
$(".third").animate({'opacity':1}, 3000);
$(".fourth").animate({'opacity':1}, 4000);
$(".fifth").animate({'opacity':1}, 5000);
$(".sixth").animate({'opacity':1}, 6000);
$(".seventh").animate({'opacity':1}, 7000);
$(".eight").animate({'opacity':1}, 8000);
});
</script>.descr {
opacity:0;
}
.first, .second, .third {
opacity:0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="post">
<h4>THis is a concert</h4>
<p>Where: XYZ Arena</p>
<p>When: XYZ h</p>
<small>(Click to expand)</small>
<p class="descr">
<div class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </div><div class="second">do eiusmod temporincididunt ut labore et dolore magna </div><div class="third">aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div><div class="fourth"> ullamco laboris nisi ut aliquip ex ea commodo consequat.</div><div class="fifth"> Duis aute irure dolor in reprehenderit in voluptate velit esse </div><div class="sixth">cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat </div><div class="seventh">cupidatat non proident, sunt in culpa qui officia deserunt mollit </div><div class="eight">anim id est laborum.</div>
</p>
</div>Я еще не добавил все class в коде css, но я вижу, что он работает, потому что я могу установить разные сроки для каждого перехода для каждой строки. Теперь здесь возникает вопрос новичков: как я могу выбрать все divs под .descr, не создавая дополнительный элемент css и ссылаясь на каждого отдельного .class под ним: .first, .second, .third. Пробовал .descr, div, но не работает. И это такой простой вопрос, что никто его не спрашивает и, следовательно, не может найти ответ.
спасибо редактирования @Rachel, вопрос выглядит лучше теперь действительно. У вас есть ответ на мой вопрос? благодаря! – Pere
У меня есть несколько шоу/скрыть трюки, но не тот, который подходит вашим потребностям, я не думаю. Я посмотрю немного. –
оглядывались, я изучил способы перехода «div» вверх, вправо, влево и т. Д., Но я ничего не нашел для фактического текста. Любой отзыв, приветствуется! – Pere