Как сделать появление кнопки после текста?

@Риназ · Регистрация: 16.06.2017

Студворк — интернет-сервис помощи студентам

Всем привет! На сайте сделал плавное появление текста(по буквам). Как сделать так, чтобы когда появляется весь текст, появилась кнопка? Пробовал установить задержку на появление кнопки, но кнопка не равномерно появляется(то раньше, то позже). Эта разница не велика(ели заметна), но все же я хочу 100% быть уверен, что он появится равномерно всегда.
Вот код появления текста:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
    $.fn.animate_Text = function() {
        var string = this.text();
        return this.each(function(){
            var $this = $(this);
            $this.html(string.replace(/./g, '<span class="new">$&</span>'));
            $this.find('span.new').each(function(i, el){
                setTimeout(function(){ $(el).addClass('div_opacity'); }, 59 * i);
            });
        });
    };
    $('#plav-text').show();
    $('#plav-text').animate_Text();
});

@Mr_Sergo · 22.06.2018, 15:13

Риназ, html прикрепи- чтоб видеть все в действии, функцию show() тоже

@Риназ · 22.06.2018, 15:15 **[ТС]**

HTML5
1
2
3
<div id="plav-text">
тут текст, который медленно появляется.
</div>

@Mr_Sergo · 22.06.2018, 15:20

Риназ,

Сообщение от zlojnaxa

функцию show() тоже

@Риназ · 22.06.2018, 15:21 **[ТС]**

Больше ничего нету, JS и HTML

@Mr_Sergo · 22.06.2018, 15:23

Риназ, аа, стоп, это метод?

Добавлено через 1 минуту
Риназ, ничего не работает:
https://jsfiddle.net/zlojnaxa/e5xa7qds/

@Риназ · 22.06.2018, 15:25 **[ТС]**

zlojnaxa, забыл. Есть еще и CSS:

CSS
1
2
3
4
5
6
7
8
9
#plav-text{display:none;}
            #plav-text .new{opacity: 0;}
            #plav-text .div_opacity{
            -webkit-transition: opacity .1s ease-in-out;
            -moz-transition: opacity .1s ease-in-out;
            -ms-transition: opacity .1s ease-in-out;
            -o-transition: opacity .1s ease-in-out;
            transition: opacity .1s ease-in-out;
            opacity: 1;}

@Mr_Sergo · 22.06.2018, 16:02

Сообщение от Риназ

забыл. Есть еще и CSS:

вот все надо клещами вытягивать

Добавлено через 29 секунд
Риназ, вот теперь можно что-то подумать

Добавлено через 34 минуты
Риназ, Может так: https://jsfiddle.net/zlojnaxa/uhrt9ex8/1/

Добавлено через 48 секунд
Риназ,

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
<div id="plav-text">
тут текст, который медленно появляется.
</div>
<div class="but"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var asd = $('#plav-text').text().length;
$.fn.animate_Text = function() {
    var string = this.text();
    return this.each(function(){
        var $this = $(this);
        $this.html(string.replace(/./g, '<span class="new">$&</span>'));
        $this.find('span.new').each(function(i, el){
            setTimeout(function(){
                $(el).addClass('div_opacity');
                if( i+3 == asd){
                    $('.but').show();
                }
            },59*i);
        });
    });
};
$('#plav-text').show();
$('#plav-text').animate_Text();

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#plav-text{display:none;}
#plav-text .new{opacity: 0;}
#plav-text .div_opacity{
-webkit-transition: opacity .1s ease-in-out;
-moz-transition: opacity .1s ease-in-out;
-ms-transition: opacity .1s ease-in-out;
-o-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
opacity: 1;}
.but{
    width: 100px;
    height: 100px;
    background-color: #777;
    display: none;
}

@Риназ · 22.06.2018, 17:02 **[ТС]**

zlojnaxa, у меня другой вопрос. Как перевести текст в новую строчку. Обычный <br/> не работает

@Mr_Sergo · 22.06.2018, 17:31

Сообщение от Риназ

у меня другой вопрос.

Другой вопрос- новая тема.

Новые блоги и статьи Все статьи Все блоги /
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .	PowerShell Snippets iNNOKENTIY21 11.11.2025 Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	22.06.2018, 15:13
	Риназ, html прикрепи- чтоб видеть все в действии, функцию `show()` тоже 0

@Риназ 12 / 2 / 2 Регистрация: 16.06.2017 Сообщений: 532
	22.06.2018, 15:21 [ТС]
	Больше ничего нету, JS и HTML 0

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	22.06.2018, 15:23
	Риназ, аа, стоп, это метод? Добавлено через 1 минуту Риназ, ничего не работает: https://jsfiddle.net/zlojnaxa/e5xa7qds/ 0

@Риназ 12 / 2 / 2 Регистрация: 16.06.2017 Сообщений: 532
	22.06.2018, 17:02 [ТС]
	zlojnaxa, у меня другой вопрос. Как перевести текст в новую строчку. Обычный <br/> не работает 0

Как сделать появление кнопки после текста?

Решение