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

您可以在delay(whatever_number).之前插入.fadeOut()，如果这是您的意思。此外，您的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>

无法正常制作动画

1 个答案: