Cześć. Mam zrobiony system logowania oparty o ajaxa lecz późniejsze pokazywanie błędów w pojemniku wygląda źle. Jak mogę zanimować pojawienie się tego pojemnika? Tak żeby nie wyglądało to tak, że się od razu pojawia tylko jest takie jakby wejście. Ktoś coś?
Ps: szukałem w Google, ale nie mam pojęcia jak to się po angielsku nazywa
Sugerowałbym JavaScript. Skoro już pewnie używasz jquery, to w prosty sposób możesz uzyskać ten efekt.
http://api.jquery.com/fadein/
$("#error-container").fadeIn(500);
Nie bardzo mi to działa.
Zdefiniowałem sobie element, który za to odpowiada: <div id="login-errors" role="alert"></div>
Następnie przy błędzie:
document.getElementById("login-errors").className = "alert alert-danger alert-dismissible fade in";
$("#login-errors").fadeIn("slow", function()
{
document.getElementById("login-errors").innerHTML = 'Podaj nazwę użytkownika oraz hasło.';
});
Lecz animacja nie działa, po prostu się pojawia i tyle.
Rozwiązanie: <div id="login-errors" style="display: none;"></div>
I powyższy kod działa.
Jeśli już używasz jquery, to zamiast document.getElementyById() użwaj jquery konsekwentnie.
$("#login-errors").addClass("alert alert-danger alert-dismissible fade in")
.fadeIn("slow", function()
{
$(this).html("Podaj nazwę użytkownika oraz hasło.");
});
Moim zdaniem powinieneś zostosować dla ładniejszego efektu trochę inny kod, bo ten jest tylko opóźnieniem i tak właściwie to tutaj fadeIn mija się całkowicie z celem.
$("#login-errors")
.addClass("alert alert-danger alert-dismissible fade in")
.html("Podaj nazwę użytkownika oraz hasło.")
.fadeIn("fast");
@Szymoon202 jeśli chodzi o display: none
, to faktycznie zapomniałem wspomnieć o tym, że domyślnie musi być ukryty ten element, bo wydawało mi się to zbyt oczywiste.
Dodatkowo, czym są klasy fade
i in
? To nie jest jakiś błąd?
Poprawiłem cały kod - jeżeli jquery, to jquery, jeżeli zwykły js, to js;
Usunąłem powtórki;
Klasy fade
oraz in
były razem z bootstrapem, ale zauważyłem, że nic nie zmieniją, więc również je usunąłem;
Dzięki za całą pomoc
Ten temat został automatycznie zamknięty 32 dni po ostatnim wpisie. Tworzenie nowych odpowiedzi nie jest już możliwe.