Wykonanie dwóch poleceń w tym samym czasie (jQuery)

0

Mam taki kod, który animuje menu, gdy schodzi się w dół strony. Jednak kod jest wykonywany tak, że dodawanie klas następuje po sobie z lekkim opóźnieniem. Jak mogę zrobić tak, by dodanie klas odbywało się w tym samym czasie, by nie było żadnych opóźnienie?
Oto kod:

$(window).scroll(function() {
                var scrollTop = $(window).scrollTop();
                if (scrollTop > $(document.body).offset().top) {
                    $("nav").addClass("nav-active");
                    $(".nav-end").addClass("nav-end-active");
                } else {
                    $(".nav-end").removeClass("nav-end-active");
                    $("nav").removeClass("nav-active");

                }
            });
0

Poczytaj jak działa event loop - w tym wypadku klasy zostaną efektywnie dodane / usunięte w tej samej chwili. Jeśli widzisz jakieś artefakty, być może jest to związane z CSSami (transition?) lub innym JSem.

Wrzuć minimalny kod (HTML + CSS + JS) prezentujący problem to pomyślimy dalej.

0

Kod HTML:

<nav>
        <div id="0" class="nav-logo">
            <div class="text">LogoIpsum</div>
        </div>
        <div class="nav-button"></div>
        <div class="nav-button"></div>
        <div class="nav-button"></div>
        <div id="1" class="nav-button">
            <div class="text">O nas</div>
        </div>
        <div id="2" class="nav-button">
            <div class="text">Projekty</div>
        </div>
        <div id="3" class="nav-button">
            <div class="text">Wsparcie</div>
        </div>
        <div id="4" class="nav-button">
            <div class="text">Kontakt</div>
        </div>
        <div id="5" class="nav-button">
            <div class="text">Sponsorzy</div>
        </div>
        <div class="nav-end">
            <div class="text">Blog.</div>
        </div>
    </nav>

Kod CSS:

nav {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 10.5vh;
    background-color: rgba(0, 0, 0, 0);
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(12, 1fr);
    color: white;
    overflow: visible;
    z-index: 2;
    transition: all 300ms ease;
}

nav:hover {
    background-color: white;
    color: black;
    /*transition: all 300ms ease; */
    box-shadow: 0px 1px 3px 0px rgba(12, 31, 81, 0.75);
}

.nav-active {
    background-color: white;
    color: black;
    /*transition: all 300ms ease; */
    box-shadow: 0px 1px 3px 0px rgba(12, 31, 81, 0.75);
}

nav:hover .nav-end {
    border-left: 1px solid #E0E5F0;
    opacity: 1.0;
    /*transition: all 300ms ease; */
    color: black;
}

.nav-end-active {
    border-left: 1px solid #E0E5F0;
    opacity: 1.0 !important;
    /*transition: all 300ms ease; */
}

.nav-logo {
    grid-area: 1 / 1 / 1 / 3;
    color: inherit;
    font-size: 2rem;
    text-align: center;
    background-color: inherit;
    position: relative;
}

.nav-button {
    color: inherit;
    font-size: 1rem;
    font-weight: 500;
    background-color: inherit;
    line-height: 100%;
    /*transition: all 300ms ease; */
    position: relative;
}

.nav-button:hover {
    color: #29C9FF;
    background-color: inherit;
    /*transition: all 300ms ease; */
    ;
}

.nav-end {
    background-color: inherit;
    color: inherit;
    grid-area: 1/11/1/13;
    text-align: center;
    font-size: 1.5rem;
    position: relative;
    opacity: 0.0;
    white-space: nowrap;
}
0

I jesteś absolutnie przekonany, że to transition: all 300ms ease; nie jest odpowiedzialne za efekt opóźnienia?

0

Przepraszam wyraziłem się nie precyzyjnie. Opóźnienie w animacji jest kiedy pojawia lub znika menu i występuje ono między nav-end (blog) a resztą menu (nav). Jedno znika wcześniej niż drugie (minimalnie).

https://drive.google.com/file/d/1IIGjWHAF_7rFnTfnmbKE_m3Hnej9_ham/view?usp=sharing

0

Zauważ, że w .nav-end nie masz żadnego transition, więc jego opacity:1 zmienia się na opacity:0 od razu, bez animacji.

0

To jeszcze nie to - cały czas widać mniejsze alej jednak opóźnienie (uważam że to wina JS) i jak scrolluje stronę to jest nie ciekawie ale to raczej kwestia eksperymentów.

https://drive.google.com/file/d/1l9qkKjNZJ93woyllH3RDiFBmsDlN9Caz/view?usp=sharing

1 użytkowników online, w tym zalogowanych: 0, gości: 1