if abfrage

[m-ortloff]

Hallo,

ich habe eine Navigation erstellt die sich beim ersten laden der Seite um einen Kreis herum befindet. Sobald man einen Div (nav-div) dieser Navigation anklickt bewegen sich diese den oberen Rand und nehmen die form einer "klassische" Navigation an. Außerdem soll sich dann demnächst ein neues Div (text-div) einblenden aber das ist nicht so wichtig... Meine Frage ist nun wie erstelle ich eine if-Abfrage die guckt ob sich die "nav-div" elemente schon oben am Rand befinden und dann nur
das "text-div" anzeigt.
Vielen dank im voraus im Anhang mein jQuery Code ;)

$(document).ready(function(){
  $.getScript("script/easing.js");
  
  var navi = '.unternehmen,.leistungen,.qualitaet,.kontakt';
  
  $(navi).click(function(){
    $(".unternehmen").animate({top: "20", left: "5%"}, 1800, "easeOutQuint");
    $(".leistungen").animate({top: "20", left: "25%"}, 1800, "easeOutQuint");
    $(".qualitaet").animate({top: "20", left: "45%"}, 1800, "easeOutQuint");
    $(".kontakt").animate({top: "20",left: "65%"}, 1800, "easeOutQuint");
    $("#logo").animate({opacity: "0.2"}, 1800);
    $("#backButton").fadeIn(1800);
  });


 $("#backButton").click(function(){
     $(".unternehmen").animate({top: "50", left: "360"}, 1800, "easeOutQuint");
    $(".leistungen").animate({top: "90", left: "625"}, 1800, "easeOutQuint");
    $(".qualitaet").animate({top: "230", left: "835"}, 1800, "easeOutQuint");
    $(".kontakt").animate({top: "420",left: "950"}, 1800, "easeOutQuint");
    $("#logo").animate({opacity: "1.0"}, 1800);
    $("#backButton").fadeOut(1800);
 });
});

 

[Tronjer]

In dem du die aktuelle Position des Divs in einer Variablen speicherst und letztere in die if-Abfrage einbaust.

 

[Sempervivum]

Wahrscheinlich kannst Du das, was Du vorhast, einfacher durch einen Callback bei einer der animate()-Funktionen erreichen:

$(".unternehmen").animate({top: "20", left: "5%"}, 1800, "easeOutQuint",
  function() {
    // hier text-div anzeigen
    });

Diese Funktion wird aufgerufen, wenn die Animation abgeschlossen ist, d. h. wenn sich die Menüpunkte an ihrer endgültigen Position am oberen Rand befinden.
Siehe auch die Doku von jQuery:
.animate() | jQuery API Documentation

 

[Tronjer]

Wahrscheinlich kannst Du das, was Du vorhast, einfacher durch einen Callback bei einer der animate()-Funktionen erreichen

Das wäre sogar noch eine bessere Lösung. In dem Fall müsste dem Callback ein unbind() für das entsprechende Click-Event übergeben werden. Wobei natürlich darauf zu achten ist, dass der unbind() nicht mehrfach aufgerufen wird.

 

[Sempervivum]

Hallo Tronjer,
kannst Du das mit dem unbind() mal näher erklären? Das Menü soll nach dem Verschieben doch wahrscheinlich weiter auf Klick funktionieren.

 

[Tronjer]

Soweit ich die Frage verstanden habe, befinden sich die Navigationspunkte zu Beginn irgendwo auf der Seite und sollen beim Klick an den oberen Rand wandern, was de facto bedeutet, dass die Animation nur einmal getriggered wird.

Nun könnte man abfragen, ob das Event bereits gefired wurde, oder wo sich die Navigationselemente befinden. Oder man killt das Event mit dem Callback und könnte ja gleichzeitig wieder eine neue Funktion auf die Elemente binden.