无法正确动画

Question

我制作了一个简单的文本转换器，但我不知道如何正确使用 animate.css。它可以工作，但我希望动画被延迟并且不像现在那么快。我尝试使用.delay，但它不起作用。我对 jQuery 和动画很陌生。

<div class="col-7 justify-content-center">
        <span id="role"></div>
</div>

<script>
    jQuery(function ($) {
        var roles = ['role 1', 'role 2', 'role 3'];
        //used to determine which is the next roles to be displayed
        var counter = 0;
        var $role = $('#role')
        //repeat the passed function at the specified interval - it is in milliseconds
        setInterval(function () {


            //display the role and increment the counter to point to next role
            $role.text(roles[counter++]);
            //if it is the last role in the array point back to the first item
            if (counter >= roles.length) {
                counter = 0;
            }

            $role.fadeIn('slow');
            $role.fadeOut('slow');
        }, 4000 )
    })
</script>

Answer 1

您可以在.fadeOut() 之前插入delay(whatever_number).，如果这就是您的意思。此外，您的 span 标签应该正确关闭（也许这只是问题中的一个错字 - </div> 而不是 </span>）

jQuery(function($) {
  var roles = ['role 1', 'role 2', 'role 3'];
  //used to determine which is the next roles to be displayed
  var counter = 0;
  var $role = $('#role')
  //repeat the passed function at the specified interval - it is in milliseconds
  setInterval(function() {


    //display the role and increment the counter to point to next role
    $role.text(roles[counter++]);
    //if it is the last role in the array point back to the first item
    if (counter >= roles.length) {
      counter = 0;
    }

    $role.fadeIn('slow');
    $role.delay(2500).fadeOut('slow');
  }, 4000)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-7 justify-content-center">
  <span id="role"></span>
</div>