Csináltam HTML-CSS-JS kódokkal oldalt. Van 3 gomb és 3 div egy gomb megnyomására az adott sorszámú div class-hoz hozzáadja a BOX-ot, a többihez pedig a Hiddent. Hogyan tudnám megoldani, hogy legyen ezen a "cserén" úgynevezett "fade" effekt?

Akkor nem értem mit akarsz, olyan nincs egy classt fade-elsz hozzá a divhez.

Mit akasz elérni a box osztállyal?

Ez nem lenne jó?

function elso() {

var elso = document.getElementById("fp");

elso.classList.add("boxed");

elso.fadeIn();

}

Ha jól értem, akkor azt akarod, hogy mindig egy doboz legyen látható, és az átmenet folytonos legyen. Mivel sema display, sem a visibility attribútumokat nem lehet folytonossá tenni,a zért az opacity CSS attribútumot kell pluszban kihasználni:

.hidden:{

visibility: hidden;

opacity: 0;

transition: opacity 2s, visibility 2s;

}

Ez azt teszi, hogy a transition miatt az opacity és a visibility szabályt is 2 másodperc alatt vezeti be, emiatt fokozatosan fog eltűnni az elemed. Csaka visibility nem elég, mert a visibilityre nincs áttűnés megcsinálva, az csak annyit csinálna, hogy 2 másodpercig ottmarad, aztán hirtelen eltűnik. Ha csak az opacityre raksz transitiont, akkor meg a hidden szabály lép azonnal életbe, és ugyanúgy azonnal eltűnik.

Itt egy példa:

[link]