Делаем различными способами эффект поочередного появления элементов.
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"});
});
}
});
});
Пример работы скрипта
показать
убрать
меню
1
2
3
4