Efekt FadeIn i FadeOut

Question

Witam umiem podstawy javascript ale niestety jeszcze nie zdażyłem się nauczyć jQuery i tu się rodzi moje pytanie bo chce użyć w galerii funkcji fadeIn i fadeOut, gdzie mam wstawić te właśnie funkcje? gdy wstawiam tak jak w bloczu kodu to zdjęcie pierwszo się zmienia a dopiero później znika i pojawia a ja chciałbym żeby było tak że znika te pierwsze i pojawia się następne oto mój kod:

var zdjecie1 = "<img onclick=\"zmienObrazek1()\" src=\"img/przed/r1.JPG\" class=\"img-responsive img-rounded tzdj\">";

var obrazek1 = document.getElementById("tzdj1");
obrazek1.innerHTML = zdjecie1;

function zmienObrazek1()
{
    $("#tzdj1").fadeOut(500);
    
    if(obrazek1.innerHTML == zdjecie1)
    {
        $("#tzdj1").fadeIn(500);
        obrazek1.innerHTML = "<img onclick=\"zmienObrazek1()\" src=\"img/po/r1.JPG\" class=\"img-responsive img-rounded tzdj\">";
    }
    else
    {
        $("#tzdj1").fadeIn(500);
        obrazek1.innerHTML = "<img onclick=\"zmienObrazek1()\" src=\"img/przed/r1.JPG\" class=\"img-responsive img-rounded tzdj\">";
    }
}

Answer 1

Musisz elementom domyślnie nadać opacity na 0.

Comments

Którym elementom i jak to zrobić w css?

---

Sorry mój błąd. Nie opacity, tylko display: none;. Musisz go nadać zdjęciom.

---

Ale którym bo nie do końca rozumiem jak dodaje to w css to mi zdjęcia znikają i to wszystko nie wiem w czym ma to pomóc xDD Może coś więcej byś powiedział?