Поочередная загрузка элементов

Делаем различными способами эффект поочередного появления элементов.

jQuery (show + :eq + next)

Постепенное появление элементов .block, изначально у этого класса в CSS должно быть прописано display:none

$(document).ready(function() { 
  $(".block:eq(0)").show("fast", function () {
    $(this).next().show("slow", arguments.callee);
  });
});

Другой вариант, изначально у класса .block в CSS должно быть прописано display:none

$(function() {
      $('.block').each(function(i) {
    $(this).delay((i++) * 250).fadeTo(500, 1); })
});

Поочередная загрузка для элементов лэндинга

#ef N — ID родителя
.row — класс на который распространяется эффект
eq(0), eq(1), eq(2)… — порядковый элемент .row

$(document).ready(function(){

$('#ef1 .row, #ef2 .row, #ef3 .row, #ef4 .row').css({visibility:"hidden"});

 var h = $(window).height();
 $(window).scroll(function(){

 if ( ($(this).scrollTop()+h) >= $("#ef1").offset().top) {
 $("#ef1 .row").css({visibility:"visible"});
 $("#ef1 .row").addClass('animated fadeInUp');
 } 

 if ( ($(this).scrollTop()+h) >= $("#ef2").offset().top) {
 $("#ef2 .row").css({visibility:"visible"});
 $("#ef2 .row").addClass('animated fadeInLeft');
 } 

 if ( ($(this).scrollTop()+h) >= $("#ef3").offset().top) {
 $("#ef3 .row").css({visibility:"visible"});
 $("#ef3 .row").eq(0).addClass('animated fadeInRight');
 $("#ef3 .row").eq(1).addClass('animated fadeInLeft');
 $("#ef3 .row").eq(2).addClass('animated fadeInDown');
 } 

 if ( ($(this).scrollTop()+h) >= $("#ef4").offset().top) {
 $("#ef4 .row").css({visibility:"visible"});
 $("#ef4 .row").addClass('animated fadeInUp');
 } 


 if ( $(this).scrollTop() == 0 ) {
 $("#ef1 .row, #ef2 .row, #ef3 .row, #ef4 .row").each(function(){
 if ( $(this).hasClass('last') ) {
 $(this).removeClass().addClass("row last");
 } else {
 $(this).removeClass().addClass("row");
 }
 $(this).css({visibility:"hidden"});

 });
 }


 });
});

Пример работы скрипта

показать

убрать

меню

Поделиться в соц. сетях: