Verwenden von offset(); Koordinaten zum Auslösen von fadeOut();

Question

Sie können durch meinen Repräsentanten sagen, dass ich ein super Anfänger bin, Entschuldigungen, wenn Ihnen das einfach erscheint.

Ich habe ein Modell-Solarsystem, das sich in HTML und CSS dreht. Ich habe ein paar JS darin gepflastert, um die Planeten spielen einige Musik und fadeOut() auf Hover()

Allerdings möchte ich den Hover() entfernen und machen die Planeten tun ihr Ding auf der Grundlage ihrer Koordinaten; jeder von ihnen spielt eine Note, wenn sie eine bestimmte Koordinate treffen.

Ich habe dies versucht:

$(document).ready(function() { 
    var x = $("#mercury").offset; 
if(x.top >= 1200.00 && x.left >=1000.00){ 
    $("#mercury").fadeOut("slow"); 

}; 

Aber, passiert nichts.

Ich bin sicher, das ist ein Problem meiner eigenen Ignoranz, ich schreibe das wahrscheinlich falsch, aber ich brauche Hilfe.

Kurz gesagt, wie trigger ich ein Ereignis basierend auf offset() Koordinaten?

Answer 1

Um eine Funktion aufzurufen, müssen nach dem Funktionsnamen Klammern gesetzt werden. Sie müssen also .offset in .offset() ändern. Sie haben auch wenn Bedingungen schließende geschweifte Klammer fehlt. Versuchen Sie also, Ihren Code immer einzurücken, sodass Sie die öffnenden und schließenden Klammern sehen.

Versuchen Sie es.

$(document).ready(function() { 
    var x = $("#mercury").offset(); 
    if(x.top >= 1200.00 && x.left >= 1000.00){ 
     $("#mercury").fadeOut("slow"); 
    } 
}; 

Answer 2

Haben Sie eine Animationslaufschleife? (Eine Funktion, die ständig aufgerufen wird, um Ihre Schnittstelle zu aktualisieren).

Sie führen Ihren Code in der Funktion 'Dokument bereit' aus. Diese Funktion wird nur einmal ausgeführt, wenn die Seite vollständig geladen wurde und nicht mehr.

Um zu erreichen, was Sie wollen, müssen Sie Ihren Code kontinuierlich ausführen, so dass es diese Überprüfung für jeden Animationsrahmen (wie Ihre Animationen stattfinden) ist.

Wenn Sie noch keine Laufschleife haben, um Ihren Code einzugeben, können Sie ein Intervall festlegen, um die Position des Planeten ständig zu überprüfen.

Ein Beispiel

$(document).ready(function(){ 

    var myLoop = window.setInterval(function() { 

     var x = $("#mercury").offset(); 
     if(x.top >= 1200.00 && x.left >= 1000.00){ 
      $("#mercury").fadeOut("slow"); 
     } 

    }, 200); // Execute the above every 200 milliseconds 
}); 

Wenn auf der Spur, die Sie stoppen wollten führen die Überprüfung/Schleife nur:

window.clearTimeout(myLoop);