Почему возникает заикание, когда l oop запускается во второй раз? - PullRequest
0 голосов
/ 29 марта 2020

Поэтому я использовал функцию обратного вызова для l oop этой анимации, а также для предотвращения мгновенного отображения текста с задержкой перед каждым отображением текста, но анимация почему-то не работает при повторении цикла во второй раз. Кроме того, вы можете сказать мне, почему функция text () запускается до того, как эффект будет завершен. Есть ли более простой способ контролировать порядок событий, кроме вложенных функций обратного вызова? Спасибо!

$(function test() {
  $(".display-1").text('Heading').fadeToggle(1500, function() {
    $('.display-1').text('Hey').fadeToggle(1500, test);
  });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<!--Defining an empty h1 to add text to later on with jQuery -->
<h1 class="display-1"></h1>

1 Ответ

0 голосов
/ 29 марта 2020

Это должно сделать это, функция fadeToggle может только исчезать или исчезать в элементе,

, поэтому первый вызов скрывает это.

, затем второй изменяет текст и покажите элемент,

третий вызов снова скрывает его,

, а четвертый показывает его и меняет его текст,

и пятое начало начинается заново, создавая oop.

$(function test() {
   $(".display-1").text('Heading').fadeToggle(1500, function() {
       $('.display-1').text('Hey').fadeToggle(1500, function(){
           $('.display-1').fadeToggle(1500, function(){
               $('.display-1').text('Heading').fadeToggle(1500, test);
           });
       });
   });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<!--Defining an empty h1 to add text to later on with jQuery -->
<h1 class="display-1"></h1>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...