Pojawienie się elementu - css

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);
1 polubienie

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. :stuck_out_tongue:

Dodatkowo, czym są klasy fade i in? To nie jest jakiś błąd?

1 polubienie

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 :slightly_smiling_face:

1 polubienie

Ten temat został automatycznie zamknięty 32 dni po ostatnim wpisie. Tworzenie nowych odpowiedzi nie jest już możliwe.