jquery sequentielle animation

ich versuche zu replizieren diese animation

http://tympanus.net/Tutorials/AnimatedContentMenu/

ich bin nicht in der Lage, animieren Sie die Menüelemente, als Schiebe bis sequentiell

    $('#bar').animate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each( function() {
                $(this).animate(
                    {top:'0px'},
                    {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
                }); 
        });
    }
});

In dieser Weise werden die Menüpunkte animiert gleichzeitig.....was ist falsch?

  • danke Nick, Ihre Faust Lösung funktioniert einwandfrei!! die zweite wäre besser, aber nicht für mich arbeiten.... Aber ich bin zufrieden mit der ersten Lösung. nochmals vielen Dank.
  • Ich war auf der Suche, um genau das gleiche zu machen, wie diese Frage, so habe ich ein kleines Jquery-plugin (github.com/fillswitch/Jquery-Sequential-Animations). Hoffe es hilft einige andere aus!
InformationsquelleAutor rick | 2011-07-03
  1. 10

    Da die Warteschlange ist pro element ist eigentlich nichts queueing hier, das ist, warum Sie alle animieren auf einmal. Es gibt ein paar Möglichkeiten, dies zu tun, obwohl. Eine einfache Möglichkeit, dies zu tun, mit einer kleinen Anzahl von Elementen ist mit .delay(), wie diese:

    $('#bar').animate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each(function(i) {
            $(this).delay(i*200).animate(
                {top:'0px'},
                {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
            }); 
        });
    }
});

    Sie können testen Sie eine demo hier.

    Was dieser tut, ist die Verzögerung der animation 200ms * den index des Elements in der .each() iteration, also die ersten Animationen wird sofort, die zweite 200ms später den nächsten 200ms nach, dass, usw. Der Grund, warum ich empfehlen dies ist Sie nicht haben Verwendung 200ms für die Verzögerung, können Sie eine kleinere Nummer haben und die Animationen ein wenig überlappen, was zu sein scheint, die Wirkung, die Sie suchen.

    Einen anderen Weg, dies zu tun (weitere ausführliche, sequentielle nur, und erlaubt keine überlappung) ist die Verwendung .queue() Ihre eigenen zu bauen, zum Beispiel:

    $('#bar').animate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each(function() {
            $(document).queue(function(n) {
              $(this).animate(
                {top:'0px'},
                {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
                complete: n //call the next item in the queue             
              }); 
            });
        });
    }
});

    Sie können testen, die version hier.

    • funktionierte großartig für mich. danke.
    InformationsquelleAutor Nick Craver
  2. 0

    Queue ist einzigartig für jedes element, das bedeutet, jedes element hat seine eigenen, unabhängigen Warteschlange.
    Verwenden Sie einen Rückruf, nachdem die animation beendet hat, wird für jedes Element.
    Beispiel: Wenn Sie fünf li-tags, die Verwendung einer bestimmten Klasse für die ersten vier von Ihnen, und fügen Sie eine callback-Funktion an, die Klasse animation zum ausführen der animation, in der das nächste element.

    InformationsquelleAutor Erric
  3. 0

    Dies ist, was ich für sequentielle animation:

    for (var i = 1; i < 10; i++) {
    $('#bullet-' + i).delay(i * 1000 - 1000).fadeIn('fast', function () {
        var id = this
        setTimeout (function () {$(id).css('color', 'lightgray');}, 1500);
    });
}
    InformationsquelleAutor alieninlondon
  4. 0

    Können Sie ein Array enthält die Elemente:

    var Menus = ['menu_1', 'menu_2', 'menu_3', 'menu _4', 'menu _5'];

    Dann definieren Sie eine for-Schleife die Elemente, die Erhöhung der Wert (250ms) each-Schleife Runde:

    function myFn(time){
    for(var i = 0; i < Menus.length; i++){
      $('#' + Menus[i]).animate({'opacity' : 1}, time, 'easeInOutQuad');
      time = ++time + 250;
    };
  };

    rufen Sie dann die Funktion definieren Sie den ersten Wert in ms:

    myFn(500);
    InformationsquelleAutor pitinca
Schreibe einen Kommentar