Question

我正在使用jQuery Morphext插件来旋转一些文本。该插件循环显示四个文本选项，然后停止。我现在正试图让这个动画再次循环，比如说15秒之后，然后继续重复那个循环，但我无法让它工作。

    jQuery(document).ready(function() {

      function animateTitle() {
        jQuery("#js-rotating").Morphext({
          // The [in] animation type. Refer to Animate.css for a list of available animations.
          animation: "flipInX",
          // An array of phrases to rotate are created based on this separator. Change it if you wish to separate the phrases differently (e.g. So Simple | Very Doge | Much Wow | Such Cool).
          separator: ",",
          // The delay between the changing of each phrase in milliseconds.
          speed: 3000,
          complete: function() {
            // Called after the entrance animation is executed.
            if (this.index === 3) {
              this.stop(true);
            }
          }
        });
      };

      setTimeout(animateTitle, 5000);
    });

<script type='text/javascript' src='http://wpdev.dotdynamic.ie/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://wpdev.dotdynamic.ie/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script src="http://wpdev.dotdynamic.ie/wp-includes/js/Morphext/dist/morphext.min.js"></script>
<link rel="stylesheet" href="http://wpdev.dotdynamic.ie/wp-includes/js/Morphext/dist/morphext.css">
<link rel="stylesheet" href="http://wpdev.dotdynamic.ie/wp-includes/js/Morphext/dist/animate.css">
<span id="js-rotating">Text 1, Text 2, Text 3, Text 4</span> Rotates

这种方法不起作用，因为我的所有要旋转的文本都会显示在页面上，直到达到第一个时间间隔，然后在动画不重复后运行Morphext函数之后。

对我在这里做错的任何想法都非常感激。

jQuery Morphext动画：停止，等待，然后重新开始

0 个答案: