La base de jQuery animation: Elipsis (les trois points apparaissant de manière séquentielle)

Ce dont j'ai besoin:

J'ai besoin d'une animation elipisis (...), un point figurant après l'autre. L'animation doit en boucle. J'aimerais réaliser cela via jQuery

Séquence d'Animation:

Image 1: en Attente de votre sélection

Image 2: en Attente de votre sélection .

Cadre 3: en Attente de votre sélection ..

Image 4: en Attente de votre sélection ...

Ce que j'ai essayé:

J'ai fait des recherches un plugin pour faire clignoter du texte et la tremblent .effet().

Ma question:

Quelqu'un a une recommandations sur la plus simple et la plus fiable des moyens d'y parvenir? Je serais heureux d'être souligné d'une technique ou d'une fonction.

OriginalL'auteur Dominor Novus | 2012-10-21

15

Si vous avez juste besoin les points apparaissent l'un après l'autre qu'une seule fois, essayez quelque chose de très simple comme suit:
```
<div id="message">Awaiting your selection</div>

var dots = 0;

$(document).ready(function() {
    setInterval (type, 600);
});

function type() {
    if(dots < 3) {
        $('#message').append('.');
        dots++;
    }
}
```
http://jsfiddle.net/fVACg/

Si vous souhaitez qu'elles apparaissent plus d'une fois (à supprimer, puis re-imprimé), vous pouvez faire quelque chose comme ce qui suit:
```
<div>Awaiting your selection<span id="dots"></span></div>

var dots = 0;

$(document).ready(function() {
    setInterval (type, 600);
});

function type() {
    if(dots < 3) {
        $('#dots').append('.');
        dots++;
    } else {
        $('#dots').html('');
        dots = 0;
    }
}
```
http://jsfiddle.net/wdVh8/

Enfin, la caisse un tutoriel j'ai écrit il y a quelques années. Vous trouverez peut-être utile.

Merci pour cette réponse rigoureuse si je n'arrive pas à reproduire l'animation dans ma page web: tinyurl.com/8ppm9l7. J'ai changé le "$" symbole "jQuery". Au-delà de cela, la seule chose à laquelle je pense est un conflit potentiel avec d'autres scripts jQuery. La fonction setInterval être limitée à un élément ou d'un événement à la place de mon document?
J'avais édité mon question à préciser que l'animation doit être en boucle selon votre deuxième démo.
Si vous avez copié et collé le code, allez juste après la dernière } et appuyez sur la touche retour arrière une fois (ou il suffit de copier tout, mais le dernier } et l'ajouter vous-même). À la fin, il semble être un étrange personnage invincible, éventuellement, d'après la copie & coller le code de jsFiddle. Cela devrait résoudre votre problème.
Wow, je n'aurais pas deviné. J'ai même été sceptique/douteux appliquer le correctif mais voilà, il fonctionne maintenant. Merci encore pour une telle réponse. J'aime la saisie de texte effet d'animation à votre tutoriel que vous avez lié.
Avertissement: Veuillez garder à l'esprit lors de l'utilisation d'intervalles, ils vont courir jusqu'à ce que l'intervalle est effacé. Ainsi, il suffit de cacher le message ne va pas arrêter de l'intervalle en cours d'exécution. Vous devrez vous arrêter vous-même. Une façon courante de le faire est: var a = setInterval(type, 600); et ensuite, à l'aide de la fonction clearInterval (); pour l'arrêter.

OriginalL'auteur StathisG

À côté de StathisG de la réponse à l'aide de jquery, vous pouvez également la réaliser par le CSS3 en utilisant animation nombre d'itérations et animation-delay

@-webkit-keyframes opacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@-moz-keyframes opacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

#loading {
    text-align: center; 
    margin: 100px 0 0 0;
}

#loading span {
    -webkit-animation-name: opacity;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: opacity;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
}

#loading span:nth-child(1) {
    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
}

#loading span:nth-child(2) {
    -webkit-animation-delay: 300ms;
    -moz-animation-delay: 300ms;
}

#loading span:nth-child(3) {
    -webkit-animation-delay: 500ms;
    -moz-animation-delay: 500ms;
}

DÉMO: http://jsfiddle.net/VXdhG/1/

Merci pour le CSS alternative et pour mettre en valeur la puissance et la beauté de la CSS. L'effet global est très lisse. Mon seul souci avec cette approche est en charge des navigateurs.
Merci, ça m'a aidé 🙂

OriginalL'auteur Eli

J'ai écrit un simple plugin JQuery pour:
https://github.com/karbachinsky/jquery-DotAnimation

//<div class="element">Loading</div>

$(function () {
    //Animation will start at once
    var $el = $('.element');

    $el.dotAnimation({
        speed: 300,
        dotElement: '.',
        numDots: 3
    });
});

JSFiddle exemple:
https://jsfiddle.net/bcz8v136/

OriginalL'auteur Igor Karbachinsky

Le code suivant est essentiellement ce que j'ai.

JavaScript:

var animatedDot;
animatedDot = animatedDot || (function () {
    var dots = 0;
    var animatedDotInterval;
    var selectorAnimatedDot = ".animatedDot";

    return {
        start: function(interval) {
            if (!interval)
                interval = 400;

            animatedDotInterval = setInterval(this.nextFrame, interval);
        },
        stop: function() {
            if (animatedDotInterval)
                clearInterval(animatedDotInterval);
        },
        nextFrame: function() {
            if ($(selectorAnimatedDot).length) {
                if (dots < 3) {
                    $(selectorAnimatedDot).append('.');
                    dots++;
                } else {
                    $(selectorAnimatedDot).html('');
                    dots = 0;
                }
            } else {
                if (animatedDotInterval)
                    clearInterval(animatedDotInterval);
            }
        }
    };
})();

function animatedDotTimeout(timeout) {
    if (!timeout)
        timeout = 10000;

    animatedDot.start();

    setTimeout(animatedDot.stop, timeout);
}

Html:

Loading<span class="animatedDot"></span>

<script type="text/javascript">
    $(document).ready(function() {
        animatedDot.start();
    });
</script>

OriginalL'auteur Trent

Vous devez vous connecter pour publier un commentaire.