Pojawienie się elementu - css

Zombie
Szymoon202
Szymoon202

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

Nieznajomy11
Nieznajomy11 Moderator forum.lvlup.pro

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);
Szymoon202
Szymoon202

Nie bardzo mi to działa. Zdefiniowałem sobie element, który za to odpowiada: `` 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.

Szymoon202
Szymoon202

Rozwiązanie: `` I powyższy kod działa.

Nieznajomy11
Nieznajomy11 Moderator forum.lvlup.pro

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?

Szymoon202
Szymoon202

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 🙂

system
system

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