JQuery - If/Else mit fadeOut/-In

Winkili · 15.03.2011

Liebe PSD'ler,

momentan tüftle ich an einem Button, welcher einen DIV ein- und, falls dieser bereits eingeblendet ist, ausblendet. Und umgekehrt.
Gibt es eine Möglichkeit - womöglich sogar mittels if und else - dies zu realisieren?
Aktuell schaut mein Code wie folgt aus:

Code:

        <script type="text/javascript">    
            $(document).ready(function(){
            $("p.headline").click(function(){
            $("#ribbon").fadeOut();
            });
            });
        </script>

Vielen lieben Dank
Winkili

ingo95 · 15.03.2011

AW: JQuery - If/Else mit fadeOut/-In

Du kannst eine Variable machen und die dann falls sie z.b. 1 ist wieder auf 0 machen und wenn sie auff 0 ist kannst du sie wieder auf 1 machen...
Und zusätzlich machst du dann noch immer wenn 0 ist fadeOut und wenn 1 ist fadeIn.
Natürlich alles nur wenner klickt.

cebito · 15.03.2011

AW: JQuery - If/Else mit fadeOut/-In

Lass die Abfrage weg und benutze fadeToggle()

Winkili · 15.03.2011

AW: JQuery - If/Else mit fadeOut/-In

Die Toggle-Funktion ist ja spitze, doch funktioniert diese auch mit Divs?

HTML:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  
<div class="button" style="cursor: pointer">Button-Text</div>
<div class="text">This paragraph has a slow, linear fade.</div>
<div id="log"></div>

<script>
$(".button").click(function() {
  $(".text").fadeToggle("slow", "linear");
});
});
</script>

</body>
</html>

Mein ganz fix umgebastelter Code will noch nicht ganz

Duddle · 15.03.2011

AW: JQuery - If/Else mit fadeOut/-In

Leg dir FireBug zu, falls du Firefox benutzt. Der zeigt dir in der Konsole sofort einen Syntax-Fehler auf Zeile 16: du hast ein "});" zuviel drin gelassen.

Duddle

cebito · 15.03.2011

AW: JQuery - If/Else mit fadeOut/-In

So ist es, der div ist auch nicht geschlossen. Stattdessen steht dort </p>
So funtionierts:

PHP:

<div class="button" style="cursor: pointer">Button-Text</div>
<div class="text">This paragraph has a slow, linear fade.</div>
<div id="log"></div>

<script>
$(".button").click(function() {
  $(".text").fadeToggle("slow", "linear");
});
</script>

Winkili · 15.03.2011

AW: JQuery - If/Else mit fadeOut/-In

Ahh... ich Depp

Danke euch.