Das Schreiben von jQuery-Funktionen, die Verkettung ermöglichen

Question

Ich möchte einige Code schreiben, der es mir ermöglicht, die animate-Funktion von jQuery durch eine zu ersetzen, die unterschiedliche Dinge tut, mir aber immer noch erlaubt, eine sekundäre Funktion auf Abschluss aufzurufen.

Im Moment schreibe ich viel Code wie diesen;

if (cssTransitions) {
   $("#content_box").css("height",0);

   window.setTimeout(function() {
       secondFunction(); 
   }, 600);
} else {
    $("#content_box").animate({
        height:0
    }, 600, function() {                
        secondFunction();
    });
}

Ich würde viel lieber eine Funktion schreiben, die so aussieht:

function slideUpContent(object) {
    if (cssTransitions) {
         object.css("height",0);
         // Nicht sicher, wie ich hier einen Rückruf bekomme
    } else {
        $("#content_box").animate({
            height:0
        }, 600, function() {
        });
    }
}

Das könnte ich so verwenden:

slideUpContent("#content_box", function(){
    secondFunction();
});

Aber ich bin mir nicht sicher, wie ich die Funktionalität bekomme, die ich brauche - nämlich eine Möglichkeit, eine andere Funktion auszuführen, sobald meine abgeschlossen ist.

Kann mir jemand mit meinem ziemlich verwirrten Gehirn helfen?

Answer 1

Die Funktionalität, nach der Sie suchen, wird als Callback bezeichnet.

Es ist einfach genug zu implementieren. Übergeben Sie einfach die anonyme Funktion (oder eine andere Funktion) als Parameter und rufen Sie die übergebene Variable an, indem Sie Klammern anhängen callback() (natürlich darauf achten, ob es sich um eine gültige Funktion handelt).

function slideUpContent(object, callback) {
    if (cssTransitions) {
         object.css("height",0);
         // Callback ausführen, wenn festgelegt
         if ($.isFunction(callback)) {
             callback();
         }
    } else {
        $("#content_box").animate({
            height:0
        }, 600, callback);
    }
}

Answer 2

Chaining bedeutet in der Regel, dass man dieses zurückgibt, damit man es tun kann

$("selector").function1().function2();

Für dein Beispiel brauchst du einfach

function1(param1, f) {
    // do stuff
    f();
 }

dann rufe es auf mit

function1("parameter", function2);

Answer 3

Ich hatte kürzlich eine Sequenz-Öffnungsanimation für eine Website erstellt. Ich fand diese Website als eine gute Informationsquelle. Der Teil, der für Sie hilfreich sein könnte, ist der Abschnitt mit dem Titel "Erstellen einer Abfolge von Animationen".

http://www.elated.com/articles/super-easy-animated-effects-with-jquery/