JavaScript Rotation der Menüpunkte wird nach einem Klick stecken

Question

Link to code

Hallo an alle, ich habe ein Kreismenü (Link oben), wo ich das ausgewählte Element will „3 Uhr“ zu drehen, dort zu stoppen und offen der Inhalt. Das nächste ausgewählte Objekt soll sich an die gleiche Position drehen und das gleiche tun. Mit dem jquery.path-Plugin habe ich es geschafft, die 8 Objekte einmal zu drehen, aber wenn ich erneut auf ein Objekt klicke, dreht es sich einfach nicht weiter setzt die Animation zurück.

Auch ich dachte, dass durch Vergleichen der linken und oberen Werte, könnte man überprüfen, ob der ausgewählte Artikel auf der "3 Uhr" Position ist oder nicht. Wenn jemand jedoch eine bessere Lösung hat, würde ich gerne davon hören.

Ich erwarte nicht, dass jemand mir ein vollständig fertiges Skript übergibt, aber ich würde jede Hilfe schätzen und auf meinen Fehler hinweisen, warum die Animation zurücksetzt oder mich in die richtige Richtung weist. Selbst wenn ein JavaScript-Guru mir sagen könnte, dass mein Ansatz, das Menü zu implementieren, Müll ist und dass es viel komplizierter ist als ich denke. Vielen Dank! :)

Answer 1

Nur eine Vermutung hier, aber ich sehe nicht, dass Sie den aktuellen Winkel irgendwo speichern. Das bedeutet, dass Sie ihnen sagen, dass sie jedes Mal bei 0 beginnen und durch das ursprüngliche Array iterieren sollen. Sie müssen eine Art von Offset außerhalb der Funktion gespeichert haben. So etwas könnte funktionieren:

var fin = -1; 
$('a.box').click(function() { 

    var menu_items = Array("#box_8", "#box_7", "#box_6", "#box_5", "#box_4", "#box_3", "#box_2", "#box_1"); 
    fin++; 

    var startAngle = 180 + fin * 45; 
    var endAngle = 135 + fin * 45; 
    var topLock = "154px"; 
    var leftLock = "260px"; 

    //$(this).addClass('selected'); 

     for (var i=0; i < menu_items.length; i++) { 

      startAngle += 45; 
      endAngle += 45; 
      $(menu_items[i]).animate({ 
       path: new $.path.arc({ 
        center: [154, 154], 
        radius: 106, 
        start: startAngle, 
        end: endAngle, 
        dir: -1 
       }), 
       opacity: '1' 
       },400); 
     }; 

}); 

Ich denke auch, dass dein Endwinkel und Startwinkel aus sind. Es sieht so aus, als ob das Zifferblatt die Zahlen für die Animation wechselt, was bedeutet, dass es die Dinge wahrscheinlich rückwärts bewegt und sie dann zu ihren aktuellen Positionen animiert. Dies würde wahrscheinlich dadurch gelöst werden, dass fin (die neue Variable oben) als Anfangswert auf 0 gesetzt wird.

Als asside: Sie

1. Sie wollen außerhalb der Click-Handler menu_items speichern.
2. Sie speichern menu_items.length auch als Variable außerhalb der Schleife.

Dann könnten Sie den Winkel diff definieren. als 360/menu_items.length und dann haben:

var angleDiff = 360/menuLength; 
    var startAngle = 180 + fin * angleDiff; 
    var endAngle = 135 + fin * angleDiff; 

sowie diese (innerhalb der Schleife):

 startAngle += angleDiff; 
     endAngle += angleDiff; 

Answer 2

var menu_items = Array("#box_8", "#box_7", "#box_6", "#box_5", "#box_4", "#box_3", "#box_2", "#box_1"); 
var menuLength = menu_items.length; 
var angleDiff = 360/menuLength; 
var fin = 0; 

$('a.box').click(function() { 
var startAngle = 180 + fin * angleDiff; 
var endAngle = 225 + fin * angleDiff; 
fin++; 
    var topLock = "154px"; 
    var leftLock = "260px"; 

     for (var i=0; i < menu_items.length; i++) { 
     startAngle += angleDiff; 
     endAngle += angleDiff; 
     $(menu_items[i]).animate({ 
      path: new $.path.arc({ 
       center: [154, 154], 
       radius: 106, 
       start: startAngle, 
       end: endAngle, 
       dir: 1 
      }), 
      opacity: '1' 
      },400); 
     }; 
});