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 that you have read and understand our privacy policy and code of conduct.

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