Stop Morphext animation when you finish the sentences

Question

Stop Morphext animation when you finish the sentences

Navigation

#1 by (2 votes)

2

I'm trying some animations with Morphext and the truth that I liked a lot, for now I want to stop the publication to reach the last word or phrase that is within id="js-rotating" but I could not ... ..

I translated the documentation and it did not go very well either ... whoever could help me would appreciate it.

$("#js-rotating").Morphext({
    // The [in] animation type. Refer to Animate.css for a list of available animations.
    animation: "bounceIn",
    // 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: 2000,
    complete: function () {
        // Called after the entrance animation is executed.
    }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Morphext/2.4.4/morphext.min.js"></script>

<span id="js-rotating">Primero, Segundo, Para Aqui</span>

javascript jquery css

asked by Gabriela 19.06.2018 в 04:13

source

1 answer

C linux: Simulate shell behavior with pipes Like statement with parameters

score 2 · Accepted Answer

You can evaluate the index of the number of words and stop the flow when you reach the limit:

$("#js-rotating").Morphext({
    // The [in] animation type. Refer to Animate.css for a list of available animations.
    animation: "bounceIn",
    // 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: 2000,
    complete: function () {
        // Called after the entrance animation is executed.
        if (this.index === 2) {
          this.stop(true);
        }
    }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Morphext/2.4.4/morphext.min.js"></script>

<span id="js-rotating">Primero, Segundo, Para Aqui</span>

I hope I help you.