подскажите пожалуйста эффекты для показа нескольких блоков по скроллу

[greenwar]

приветствую
есть несколько блоков, скажем 4, надо, чтобы они мягенько всплывали один за другим (разница 0.3-0.5 сек) с каким-нибудь эффектом, типа fadeIn
я fadeIn смотрел, но придумал только:

$('#years_text1').fadeIn(1000);
$('#years_text2').fadeIn(2000);
$('#years_text3').fadeIn(3000);
$('#years_text4').fadeIn(4000);

это не сексуально. как лучше всего сделать именно несколько блоков друг за другом?

далее, нужно по ходу скролла, чтобы блоки выезжали откуда-то или тот же fadeIn

[ksa]

это не сексуально

ППЦ!

Вспомнился анекдот...

На выставке сумок много чего представлено... Из разных экзотических материалов... Но самой дорогой была мааааленькая сумочка.
Посетитель спрашивает гида:
- Что же это за сумка? Почему она такая дорогая при таком маленьком размере?
- О! Эта сумка сделана из полового члена быка секс-гиганта! При легком поглаживании она превращается в ОГРОМНУЮ хозяйственную сумку!

Так и у тебя должны те ДИВы появляться?

[greenwar]

не, этот "эффект" можно пропустить, оставить только то, что я описАл

[ksa]

$('#years_text1').fadeIn(1000);
$('#years_text2').fadeIn(2000);
$('#years_text3').fadeIn(3000);
$('#years_text4').fadeIn(4000);

Плохо значит смотрел...
http://jquery-docs.ru/effects/fadein/
Там есть второй парамерт "Вызов". Вот его и используй...

[greenwar]

ну и чем мне поможет функция, которая запускается по окончании эффекта?
мне надо 4 блока показать с промежутками 0.3с между появлением
а после их показа мне не нужны никакие функции

[Aetae]

$('#years_text1').fadeIn(1000, function(){
    $('#years_text2').fadeIn(1000, function(){
        $('#years_text3').fadeIn(1000, function(){
            $('#years_text4').fadeIn(1000, function(){
                alert('Так то.')
            });
        });
    });
});

[ksa]

ну и чем мне поможет функция, которая запускается по окончании эффекта?
мне надо 4 блока показать с промежутками 0.3с между появлением

Вот там и запускай, используя тот же setTimeout()...

[Aetae]

Вот посложнее примерчик:

(function showNext(ids){
    if(ids) showNext.ids = ids;
    if(!showNext.ids.length) return;

    $(showNext.ids.shift()).delay(300).fadeIn(1000, showNext)
}([
    '#years_text1',
    '#years_text2',
    '#years_text3',
    '#years_text4'
]))

[greenwar]

(function showNext(ids){
    if(ids) showNext.ids = ids;
    if(!showNext.ids.length) return;

    $(showNext.ids.shift()).delay(300).fadeIn(1000, showNext)
}([
    '#years_text1',
    '#years_text2',
    '#years_text3',
    '#years_text4'
]))

по идее он проц будет больше грузить
и в нём даже больше кода
но спасибо, это то, что было нужно
а по второй части, про выезжающие блоки по скроллу, - есть решение?

[greenwar]

у меня есть такое решение:

<script>
$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 675) {
        $('.shhid').fadeIn();
    } else {
        $('.shhid').fadeOut();
    }

});</script>

но хочу, чтобы он не на высоту реагировал, а на достижение определённого id или class
так можно?