Variablen mit Ifabfrage usw.

[der_RAV3N]

Hallo!

Ich hab mir mal gedacht, eine eigene lokale Startseite zu machen, bei der ich alle meine Links verstauen kann etc.

Ich hatte vor, das schön zu machen und so, ich hab jetzt erstmal am anfang nur 3 Bilder, wenn ich über diese Bilder gehe, dann gibt es eine "Info" auch als Bild, wie einfliegt:

<script>

$(".Games").hover(function(){
  $(".Gamesinfo").animate({"left": "-=140px","opacity": "1"});
  $(".Games").animate({"opacity": "1"});
});}
$(".Games").mouseout(function(){
  $(".Gamesinfo").animate({"left": "+=140px","opacity": "0"});
  $(".Games").animate({"opacity": "0.75"});
});


$(".Social").hover(function(){
  $(".Socialinfo").animate({"left": "-=140px","opacity": "1"});
  $(".Social").animate({"opacity": "1"});
});
$(".Social").mouseout(function(){
  $(".Socialinfo").animate({"left": "+=140px","opacity": "0"});
  $(".Social").animate({"opacity": "0.75"});
});


$(".Sonstiges").hover(function(){
  $(".Sonstigesinfo").animate({"left": "-=140px","opacity": "1"});
  $(".Sonstiges").animate({"opacity": "1"});
});
$(".Sonstiges").mouseout(function(){
  $(".Sonstigesinfo").animate({"left": "+=140px","opacity": "0"});
  $(".Sonstiges").animate({"opacity": "0.75"});
});
</script>

nunja, Games ist das Bild, über das man drübergeht und Gamesinfo ist dieses Infobild.
Nun hatte ich vor, dass wenn ich auf das Games KLICKE, das Infobild wieder auszublenden und ein anderes Div einzublenden.
Ich hab mich jetzt noch nicht so viel mit JavaScript befasst, aber soweit ich weiß, muss ich diese Befehle verwenden muss:

var Games=0,Social=0,Sonstiges=0;

if (Games==0){

$(".Games").hover(function(){
  $(".Gamesinfo").animate({"left": "-=140px","opacity": "1"});
  $(".Games").animate({"opacity": "1"});
});}

[Hier Variable Games auf 1 setzen)
}

oder sowas in der art.. Nun meine Frage:
ist das alles so richtig? Ist das, wo die Variablen definiert werden so richtig und so?


Danke im vorraus ;)

 

[Tronjer]

Damit wird die Variable auf 1 gesetzt, und dann?

Frage ist, was du erreichen willst.

// Beim Click auf den Button
$('button').click(function() {

    // Mache #foo unsichtbar
    $('#foo').hide();

    // Zeige #bar
    $('#bar').show();

    // Wenn #bar sichtbar ist ...
   if ( $('#bar').is(':visible') ) {
        // tu was
        ..............................
   }
});

Es gibt viele Möglichkeiten der Zustands-Abfrage in jQuery.

hover() hat übrigens zwei Callback-Funktionen für in und out. Ein separates mouseout ist nicht notwendig.

 

[der_RAV3N]

Naja, dass eben diese Info nicht das div, das eingeblendet wird, verdeckt.. oh, ich hab grad mich irgendwie vertan.. ich muss ja das auf 1 setzen machen, wenn ich klicke^^

 

[der_RAV3N]

Also, ich wollte jetzt das so machen, wie ich es unten schreibe, aber mir ist grad auf/eingefallen dass das ja irgendwie jQuery ist, was ich da zum einfliegen verwende, oder?? Kann ich denn in dem selben script überhaupt javascript verwenden, oder geht das sowieso nicht?

Ich bewege den Cursor auf ein Icon, es wird überprüft, ob Variable x den Wert 1 hat, wenn nicht, fliegt ein Bild ein.
Wenn ich nun auf das Icon klicke, wird das vorher eingeblendete Bild ausgeblendet, der Wert von x auf 1 gesetzt und ein anderes div eingeblendet.
Wenn man jetzt wieder auf das Icon klickt, wird das div wieder ausgeblendet, der Wert von x wieder auf 0 gesetzt und das "Infobild" wieder eingeblendet..

Könntet ihr mir vielleicht ein paar Codeschnipsel geben, die ich verwenden kann?

 

[Tronjer]

Ich hatte dir ja bereits ein paar Denkanstöße gegeben. Es ist für dein Vorhaben nicht notwendig, eine Variable zu deklarieren. Du kannst statt dessen direkt den Zustand eines Elements abfragen, bsw. ob es sichtbar ist, ihm eine Klasse zugewiesen wurde, oder es einen bestimmten Wert für opacity besitzt.

Schreiben musst du dir den Code aber schon selber. Wir sind hier ein Hilfe-zur-Selbsthilfe-Forum. In der jQuery-Doku gibt es für jede Funktion erläuternde Beispiele.

Und ja, JS und jQuery lassen sich gemeinsam verwenden.

 

[der_RAV3N]

hmm, okay, dann muss ich eben nen bisschen rumprobieren und google nutzen(denk bloß nicht, ich hätte nicht schon^^)

Ich hab jetzt gerade das mit dem ausblenden so gelöst:

$(".Games").hover(function(){
   if ($('#Gamesmenu').css('opacity') == 0) {
            $(".Gamesinfo").animate({"left": "-=140px","opacity": "1"});
   }
            $(".Games").animate({"opacity": "1"});
});

jetzt habe ich aber ein problem, wenn man auf den button drückt, ist ja das Bild noch da, dann verschwindet es und das div kommt an.. ich lege das mit dem "Bild wegfliegen" aktuell so fest:

  $(".Gamesinfo").animate({"left": "+=140px","opacity": "0"});

Das problem ist halt, dass jedes mal, wenn ich auf den Button drücke, das Bild eben noch weiter weggeht.. ich hatte überlegt, das so zu lösen:

   if ($('#Gamesinfo').css('left') < 100) {

Aber das funktioniert nicht, ich habe auch schon versucht, px dahinter zu schreiben, aber da streikt dann das komplette script.