if / else / jquery

[proximate]

Hallo miteinander,
ich mühe mich seit gefühlten 5 Stunden (oke es waren erst 3...)
damit ab eine Slide in Animation für einen Div Container zu erstellen welche anderst aus als eingeblendet werden soll (einblenden mit easing ausblenden linear)

nun nach einigem rumprobieren bin ch auf die (meiner meinung nach) beste möglichkeit mittels if / else gekommen, nun verhält sich das ganze je nach aufbau jedoch ganz anderst als erwartet. ich habs mal hinbekommen das das ganze eingeblendet aber danach gleich wieder ausgeblendet wird (toooooll!)

mit dem aktuellen stand nimmt er zwar die if anweisung greift jedoch nicht auf das else zurück (sprich einblenden ok - ausblenden nok
momentan versuche ich das ganze mit :visible /:hidden resp. if :hidden else ....
auf meinem weg dahin habe ich auch bereits mit if .css('display':'none') dieselben ergebnisse erzielt (das selbe inkorrekte verhalten.)

nun zu meiner Frage, habe ich einen denkfehler (sprich geht garnicht so) oder einfach einen logikfehler (geht schon aber nicht so du depp )

langer rede kurzer sinn hier kurz der aktuelle stand :

$(document).ready(function() {
    $(".catItemBody").hide();
      $(".catItemHeader").click(function(ausblenden){
        if($(this).next('.catItemBody:hidden')){
            $(this).next('.catItemBody').slideDown(1000,'easeOutElastic')
        }
        else{
            $(this).next('.catItemBody').slideUp(1000,'linear')
        }
    });
});

habe auch bereits versucht das ganze in 2 functions zu packen mit der jeweiligen if anweisung :hidden / :visible - hat allerdings auch nicht funktioniert (hätte mich auch gewundert ehrlich gesagt)

eben im besten falle war ich soweit das er einfach das ganze ding abbrennen lies sprich slideDown .... pause ... slideUp

Ich bin ratlos hat jemand einen Tipp ?
(PS: nein ich mögchte das ganze nicht über ein accordion plugin lösen da es in ein joomla implementiert wird somit möchte ich anpassungen an der html struktur wenn möglich vermeiden.) worst case ist halt der toggle aber dann habe ich dieselbe animation

grüsse

ProXi

 

[Duddle]

AW: if / else / jquery

Das übergebene easing ist ja nur ein String, ergo kannst du das in eine Variable packen und diese im complete-Handler von .slideToggle() ändern.

var easing = "linear";
$("#klick").click(function() {
    $("#content").slideToggle(easing, function() {
	easing = (easing == "linear") ? "swing" : "linear";
    });
});

Wenn du nicht mit globalen Variablen arbeiten willst, könntest du diese Information mit $.data() an das Element anhängen.

Es gibt sicher bessere Wege, aber dieser erscheint mir straightforward / gut genug.

Edit: Nachteil der obigen Methode ist, dass ein mehrfaches Klicken dem complete hervorkommt. Die bessere Variante ist daher wohl, das vorher zu ändern:

var easing = "linear";
$("#klick").click(function() {
    easing = (easing == "linear") ? "swing" : "linear";
    $("#content").slideToggle(easing);
});

Edit 2:
Allgemeiner kannst du natürlich if/else benutzen, du bist ja nur am unterscheiden hängen geblieben. Das geht gut mit .is():

$("#klick").click(function() {
    if($("#content").is(":visible")) {
	$("#content").slideUp(1000,"linear");
    } else {
	$("#content").slideDown(2000,"swing");
    }
});

Duddle

 

[proximate]

AW: if / else / jquery

GENIAL ! :-D

das kleine .is -> und wieder was gelernt -> Danke mit dem Edit 2 funktioniert es wie gewünscht :-D
thx a lot !