2

Есть множество сайтов с прописанным появлением элементов при скролинге. Это уже такой стандарт де-факто для лэндингов. Но как организовать появление элементов без скролинга, но при загрузке страницы?

Есть у нас три блока, к примеру:

<div id="block1">1</div>
<div id="block1">2</div>
<div id="block1">3</div>

И нужно, чтобы при полной загрузки страницы они появились, вылетели слева или просто были прозрачными и обрели opacity: 1.

Как это реализовать?

https://jsfiddle.net/ypj3qwqe/

0

1 ответ 1

5

$(function() {
  $('.block').each(function(index, el) {
    setTimeout(function() {
      if ($('#load:visible').length > 0) {
        $('#load:visible').hide();
      }
      $(el).css('display', 'inline-block');
    }, 2000 + 500 * index);
  });
});
.block {
  background-color: red;
  display: none;
  padding: 2em;
  margin: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load">Загрузка...</div>
<div id="block1" class="block">1</div>
<div id="block1" class="block">2</div>
<div id="block1" class="block">3</div>

1
  • великолепно! Один вопрос - как присвоить несколько CSS-свойств? Или класс? 7 апр 2016 в 11:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.