0

Здравствуйте! Мне нужно сделать на сайте (в шапке) три постепенно появляющиеся друг за другом строки, т.е. сначала первая строка постепенно появляется, потом вторая и т.д. У меня есть код для одного дива( я так понимаю должно быть три дива):

<div id="myEffect">
текст
</div>

стили:

#myEffect {    
    display: none; 
}

скрипт:

$(function(){
    $('#myEffect').fadeIn(5000);
});

Какую функцию нужно добавить, чтобы эти дивы появлялись друг за другом? Или подскажите, пожалуйста,какой-нибудь другой код, чтобы буквы как-бы постепенно писались.

1
  • @Регина, Согласно правилам форума, вопросы не должны сводиться к предложениям выполнить работу.
    – karmadro4
    1 июн 2012 в 5:38

3 ответа 3

3

Думаю что гуру jQuery скажут, что это код можно упростить, но он работает http://jsfiddle.net/AJXCP/3/

HTML

<div class="myEffect">текст 1 текст 1 текст 1 текст 1 текст 1 текст 1 </div>
<div class="myEffect">текст 2 текст 2 текст 2 текст 2 текст 2 текст 2 </div>
<div class="myEffect">текст 3 текст 3 текст 3 текст 3 текст 3 текст 3 </div>

CSS

.myEffect {
    display: none;
}

jQuery

$(".myEffect").each(function(i, el){
    if ( i == 0 ) {
        $(el).fadeIn(1000);
    }
    if ( i == 1 ) {
        $(el).delay(2000).fadeIn(1000);
    }
    $(el).delay(4000).fadeIn(1000);
});
6
  • почему-то не выходит... 1 июн 2012 в 6:36
  • Пример по ссылке работает, может вы что то не правильно подключаете
    – omgwtf
    1 июн 2012 в 8:15
  • 2
    да ладно? а если 10 дивов будет, у вас будет 9 ифов? $(".myEffect").each(function(i, el){ $(el).delay(2000*i).fadeIn(1000); });
    – Spectre
    1 июн 2012 в 16:16
  • 1
    За что 3 плюса, LOL :D
    – user3545
    1 июн 2012 в 19:26
  • @AlexWindHope, вместо того чтоб lol-ить подсказали бы как правильней сделать
    – omgwtf
    1 июн 2012 в 22:55
2

Это конечно баловство, но вот в виде плагина ))

$.fn.showString = function(options){
    var el = this;
    var settings = $.extend({
        effect: 'fadeIn',
        timeDelay: 1000
    }, options);

    var countEls = el.length;
    var i = 0;
    timer = setInterval(function(){
        if(settings.effect == 'fadeIn') {
            el.eq(i).fadeIn(settings.timeDelay);
        } else if (settings.effect == 'fadeOut') {
            el.eq(i).fadeOut(settings.timeDelay);
        }
        if(i >= countEls){
            clearInterval(timer);
        }
        i++;
    }, settings.timeDelay * 2);
};

// подключение
// выставить время задержки и эффект fadeIn или fadeOut
// (по умолчанию: 1000 и fadeIn)
$('.myEffect').showString({
    effect: 'fadeIn',
    timeDelay: 500
});
4
  • el.eq(i)[settings.effect](settings.timeDelay); а так будет работать?
    – Spectre
    1 июн 2012 в 16:26
  • Будет. Вы же и сами могли проверить )) Только стремновато так делать, т.к. пользователь может в одной букве ошибиться и будет лажа, а так эффект выполнится только в одном или втором случае.
    – Deonis
    1 июн 2012 в 16:55
  • допустим такую ситуацию(ошибка в одной букве): $('.myEffect').showString({ effect: 'fadeln', timeDelay: 500 }); в слачае с if искать ошибку будет очень тяжело, т.к. фактически её не будет, а если же использовать мой метод, то моментально получим TypeError со всеми вытекающими
    – Spectre
    1 июн 2012 в 19:13
  • Могёт быть... Значит, так, как вы предложили.
    – Deonis
    1 июн 2012 в 19:24
0

Функцию .fadeIn() можно вызывать так:

.fadeIn( [duration] [, callback] )

Где callback — функция, которая исполняется после завершения выполнения .fadeIn(). Следовательно, если есть три блока, то можно сделать так:

HTML:

<div id="ef1" class="myEffect">text1</div>
<div id="ef2" class="myEffect">text2</div>
<div id="ef3" class="myEffect">text3</div>

CSS:

.myEffect{display:none}

jQuery:

$('#ef1').fadeIn(1000,function(){
    $('#ef2').fadeIn(1000,function(){
        $('#ef3').fadeIn(1000)
    })
})

Демо: jsfiddle.net/aJrCC

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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