Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zanik slajdera
Forum PHP.pl > Forum > Po stronie przeglądarki
rafalek1001
11.12.2018, 03:25:24
Witam. Mam prosty slider zrobiony w js ale czasami w momencie gdy obrazek osiągnie opacity równe zero div w którym jest slajder tak jakby zanika na ułamek sekundy i za moment wraca gdy opacity z powrotem zaczyna rosnąć. Jest to denerwujące bo slajder znajduje się pomiędzy nagłówkiem a przyciskiem i podczas tego krótkiego zaniku strona robi mignięcie, jakby tam tego diva nie było. Ciężko mi to wytłumaczyć, ale strzelam w ciemno, że da się to naprawić za pomocą ustawienia wysokości diva slajdera. Czy mógłby ktoś pomóc albo podsunąć jakąś wskazówkę? Z góry dzięki. Dodam jeszcze, że ten slajder na ogół działa poprawnie a powyższy problem pojawia się tylko czasami i też nie za bardzo mam pojęcie od czego to zależy. Poniżej kod.



Kod
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    
<script type="text/javascript">

    var numer = 1;
    
    function schowaj()
    {
        $("#slider").fadeOut(1500);
    }

    function zmienslajd()
    {
        numer++; if (numer>5) numer=1;
        
        var plik = "<img class=\"stopka\" src=\"img/stopka" + numer + ".png\" />";
        
        document.getElementById("slider").innerHTML = plik;
        $("#slider").fadeIn(1500);
        
        setTimeout("zmienslajd()",4000);
        setTimeout("schowaj()",2500);
    }

</script>


Kod
<div class="contact">

    <header>
    
        <h1>Dołącz do nas!</h1>
    
    </header>
    
    <div id="slider">
    
        <img class="stopka" src="img/stopka1.png">
    
    </div>
                        
    <a href="rejestracja.php" class="bluebutton">Zarejestruj się</a>

</div>
duszek
14.12.2018, 12:24:35
fadeIn w końcowej fazie fadeOut nadaje "display: none" a fadeIn "display: block;" te mignięcie jest właśnie tym spowodowane, element się wyłącza.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.