Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   подскажите пожалуйста эффекты для показа нескольких блоков по скроллу (https://javascript.ru/forum/jquery/50049-podskazhite-pozhalujjsta-ehffekty-dlya-pokaza-neskolkikh-blokov-po-skrollu.html)

greenwar 09.09.2014 15:33

подскажите пожалуйста эффекты для показа нескольких блоков по скроллу
 
приветствую
есть несколько блоков, скажем 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 09.09.2014 15:41

Цитата:

Сообщение от greenwar
это не сексуально

ППЦ! :lol:

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

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

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

greenwar 09.09.2014 15:48

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

ksa 09.09.2014 15:49

Цитата:

Сообщение от greenwar (Сообщение 329713)
приветствую
есть несколько блоков, скажем 4, надо, чтобы они мягенько всплывали один за другим (разница 0.3-0.5 сек) с каким-нибудь эффектом, типа fadeIn
я fadeIn смотрел, но придумал только:
$('#years_text1').fadeIn(1000);
$('#years_text2').fadeIn(2000);
$('#years_text3').fadeIn(3000);
$('#years_text4').fadeIn(4000);

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

greenwar 09.09.2014 16:25

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

Aetae 09.09.2014 16:37

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

ksa 09.09.2014 16:40

Цитата:

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

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

Aetae 09.09.2014 16:59

Вот посложнее примерчик:
(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 09.09.2014 17:08

Цитата:

Сообщение от Aetae (Сообщение 329736)
Вот посложнее примерчик:
(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 09.09.2014 17:30

у меня есть такое решение:
<script>
$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 675) {
        $('.shhid').fadeIn();
    } else {
        $('.shhid').fadeOut();
    }

});</script>


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


Часовой пояс GMT +3, время: 22:22.