2012-08-09 5 views
5

Erstens, jQuery Transit rockt. Wenn Sie es noch nicht gesehen haben, schauen Sie sich http://ricostacruz.com/jquery.transit/ an und staunen Sie!jquery transit animation und .stop() fx queue

Ein Problem ist zwar, dass, während es behauptet, jQuery-Effekte-Warteschlange zu verwenden, und scheint zum größten Teil, ich kann nicht jQuery .stop() Methode damit arbeiten.

ich eine Geige hier gepostet habe: http://jsfiddle.net/nicholasstephan/sTpa7/

Wenn Sie die belebte Schaltfläche klicken, wird ein Standard-jQuery .animate() verwendet wird, um langsam die Box nach rechts zu bewegen. Hit Stop stoppt, wie Sie es erwarten, die Animation. Durch das Zurücksetzen wird auch die Animation gestoppt und die Box an den Anfang zurückgesetzt.

Wenn Sie Übergang klicken, sollte es tun genau das gleiche ... aber es funktioniert nicht ...

Was ist hier los? Wer kennt einen Workaround dafür?

Danke.

+0

Ich bin auf der Suche nach einer Lösung für das gleiche Problem. Haben Sie den Code in versucht: https://github.com/rstacruz/jquery.transit/issues/18? –

+0

Ich habe das nicht versucht. Netter Fund. Ich komme mit einer einfachen alten jQuery animate für meine Animation, die für jetzt gestoppt werden muss, aber ich werde auf jeden Fall einen Blick darauf werfen. – nicholas

Antwort

4

Hier ist eine Lösung, die funktionieren könnte.

try Erstellen einer neuen Übergangsfunktion, die einen zusätzlichen Rückruf in die Warteschlange stellt. Dieser Rückruf kann bereinigt werden, nachdem die Animation durch stop beendet wurde. Anweisungen zum Löschen und Überspringen werden jedoch nicht von der alten Stopp-Funktion empfangen. Aber wir können dafür eine neue Stoppfunktion erstellen. Dies ist nur in Browser eingegeben und völlig ungetestet

(function($){ 
    $.fn.stopableTransition = function (...){ 
     var skip = false 
     var clear = false 
     this.handle("stopTransition", function(doclear, doskip){ 
      skip = doskip; clear = doclear; 
     }) 
     this.transition(...) 
     this.queue(function(){ 
      if(skip){ 
       //todo: ensure animation is removed from css 
       //todo: move object to where the animation would have finished 
      } 
      else 
      { 
       //todo: ensure animation is removed from css 
       //todo: make sure object stays at its current position 
      } 

      if(clear){ 
       skip = false 
       clear = false 
       $(this).clearQueue() 
      } 
      else 
      { 
       skip = false 
       clear = false 
       $(this).dequeue() 
      } 

     }) 
    } 
    $.fn.stopTransition = function (clear, skip){ 
     clear = (typeof(clear) === 'undefined') ? false : clear; 
     skip = (typeof(skip) === 'undefined') ? false : skip; 
     this.triggerHandler("stopTransition", [clear, skip]) 
     this.dequeue(); 
    } 
})(jQuery) 
+0

4 upvotes, also hat jemand es getestet? – mu3

0

Als @ Jason Mehr sagte, ich sah diesen Thread in dem nach oben und ich fand heraus, dass ein fork existiert und hat eine Funktion namens transitionStop() (und für das Clearing aller übrigen Animationen sollten Sie auch anrufen clearQueue()), aber in Anbetracht der Tatsache, dass diese Gabel hat ihren letzten Commit vor etwa einem Jahr, und die ursprüngliche TransitJS hat das letzte Commit vor 3 Monaten, vielleicht werden Sie einige Funktionen mit dieser Gabel verpassen.
Aber für was ich brauche, ist es der schnellste Weg.