0

Помогите пожалуйста, есть функция, суть ее - это сделать эффект текста, который набирается. То есть при переключении слайда она принимает 2 фразы: одна будет невидимая, вторая берется и по одному символу набирается. После того, как функция завершится слайд переключается и все по новой. Тот код, который я демонстрирую, рабочий. Но мне нужно еще как то ее усовершенствовать, чтобы можно было досрочно завершать и переключится на второй слайдер. Только что-то мозгами не могу дойти до этого. Буду благодарен за любую подсказку.

Его кривую роботу при переключении можете увидеть здесь.

http://klucik2016.psdcoding.co/en/

function writetext(prev,timeOneC){
    var word = '', pos = '', newWord = '', i = 0, g = 0, sub = '';
    sub = $('.topHomeBlock .slider .slick-active .subTitle'); //получаю текст в слайдере
    pos = $('.topHomeBlock .slider .slick-active .title'); //получаю второй текст в слайдере
    pos.addClass('vis');
    word = pos.text();
    pos.text('');          
    timeoutW();       
    //функция которая добавляет по одной букве к слову за один вызов, когда дойдем до конца вторая фраза будет видна
    function timeoutW() {
        if (i < word.length){
            setTimeout(function () {
                i++;
                newWord += word.charAt(i);
                pos.text(newWord);
                timeoutW();
            }, timeOneC); 
        }
        if(i === word.length){
            pos.addClass('blick');
            sub.addClass('vis');
            setTimeout(function () {
                pos.removeClass('blick');
                timeoutR();
            }, timeOneC * 15);
        }
    }    
    //функция которая удаляет по одному символу за вызов
    function timeoutR() {
        setTimeout(function () {
            if (g < word.length){
                g++;
                newWord = word.substring(g);
                pos.text(newWord);
                timeoutR();
            }            
        }, timeOneC/3);
        if(g === word.length && auto){
            if(prev){
                $('.topHomeBlock .slick-prev').click(); //предыдущий слайд
            }else{
                $('.topHomeBlock .slick-next').click(); // следующий слайд
            }
            sub.removeClass('vis'); //убираю класс чтобы текст стал невидим
            pos.text(word).removeClass('vis'); //убираю класс чтобы текст стал невидим
            writetext(false,150); //вызываю функции снова
        }
    }      
}

writetext(false, 150);
7
  • а зачем вам auto?
    – ThusMad
    18 дек 2016 в 17:03
  • @ThusMad Убрал. Это я пытался переписать. Ну не увенчалось успехом. А переменную забыл удалить. 18 дек 2016 в 17:07
  • Вам нужно, чтобы при переходе на другой слайд текст из предедущего удалился и появился новый, я правильно понял?
    – ThusMad
    18 дек 2016 в 17:11
  • @ThusMad При переключении весь текст должен восстановится но при этом он будет невиден. Это нужно для того чтобы когда пройдет круг всех слайдов чтобы он снова сработал. На другом слайде другой текст. 18 дек 2016 в 17:15
  • У вас при нажатии на кнопку на кнопку слайдера начинаеться еще один writetext(), а старый не завершаеться, во время роботы 2го все еще работает первый(потом при окончании первого переключаеться слайд и оно начиниет творить все что вы замечали). Попробуйте при нажатии на кнопку слайдера востановить текст на предедущем и заставить его ждать своей очереди(либо по нажатию на кнопку, либо по оканчанию пред. слайда)...
    – ThusMad
    18 дек 2016 в 17:38

1 ответ 1

0
function writetext(timeOneC = 150, word = '', pos = '', newWord = '', i = 0, g = 0, sub = ''){
sub = $('.topHomeBlock .slider .slick-active .subTitle');
pos = $('.topHomeBlock .slider .slick-active .title');    
pos.addClass('vis');
word = pos.text();
pos.text('');          
timeoutW();       

function timeoutW() {
    if(click){
        sub.removeClass('vis');
        pos.text(word).removeClass('vis');
        pos.removeClass('blick');
        return false;
    }
    if (i < word.length){
        setTimeout(function () {
            i++;
            newWord += word.charAt(i);
            pos.text(newWord);
            timeoutW();
        }, timeOneC); 
    }
    if(i === word.length){
        pos.addClass('blick');
        sub.addClass('vis');
        setTimeout(function () {
            pos.removeClass('blick');
            timeoutR();
        }, timeOneC * 15);
    }
}    

function timeoutR() {
    if(click){
        sub.removeClass('vis');
        pos.text(word).removeClass('vis');
        pos.removeClass('blick');
        return false;
    }
    if (g < word.length){
        setTimeout(function () {            
            g++;
            newWord = word.substring(g);
            pos.text(newWord);
            timeoutR();                       
        }, timeOneC/3);
    }
    if(g === word.length && !click){
        $('.topHomeBlock .slick-next').click();
        sub.removeClass('vis');
        pos.text(word).removeClass('vis');
        writetext(150);
    }
}      

}

Ваш ответ

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

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