Это должно сделать это, функция 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>