JQuery slidedown funktioniert nicht, wenn erste

Question

geklickt Wenn ich nur meine Box verwenden slidedown erscheint und nicht slidedown, wenn ich zum ersten Mal auf den Link klicken, aber jede nachfolgende klicken, funktioniert es wie beabsichtigt:

http://jsfiddle.net/3Gc6Q/

Answer 1

box.removeClass("hide"); nach slideDown komplette Demo sein muss: http://jsfiddle.net/3Gc6Q/9/:

$(".link").click(function(e) { 

    e.preventDefault(); 
    var box = $("#test"); 

    if (box.hasClass("hide")) { 

     box.slideDown(function(){box.removeClass("hide");}); 
    } 
    else { 
     box.slideUp(function() { 

      box.addClass("hide"); 

     }); 

    } 


}); 

Answer 2

Versuchen slideToggle()

$(".link").click(function(e) { 

    e.preventDefault(); 
    var box = $("#test"); 

    box.slideToggle('slow'); 
});​ 

Dies wird drastisch vereinfacht mit, was hast du da. Es erlaubt Ihnen auch, einige der unnötigen CSS zu entfernen, die Sie auf dem "Test" div haben.

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/zYAcB/1/

Answer 3

Entfernen Sie einfach

box.removeClass("hide"); 

Der Aufruf von slideDown wird die div sichtbar machen. Derzeit, wenn Sie die "Verbergen" -Klasse entfernen, wird es angezeigt (da es von der CSS für diese Klasse versteckt ist) und der slideDown Aufruf dann nichts tut. Wenn Sie die Klasse nicht entfernen, wird sie angezeigt, wie Sie möchten.

Alternativ können Sie die Klasse entfernen, wenn die Animation abgeschlossen ist:

box.slideDown(function() { 
    box.removeClass("hide"); 
}); 

Answer 4

Korrigiert: http://jsfiddle.net/3Gc6Q/8/