Javascript - przeskok strony podczas animacyjnej zmiany obrazka

pytanie zadane 22 grudnia 2016 w JavaScript przez N21 Początkujący (290 p.)

Cześć,

na stronie która obecnie robię znajduje się kilka losowych zdjęć, które co 5 sekund się zmieniają. Nie wiem dlaczego, ale gdy zjadę na dół strony (zdjęcia znajdują się pod sporą ilością textu) i poczekam chwile żeby zobaczyć efekt fadeOut i fadeIn, to strona automaczynie przeskakuje o około 200px do góry. Co dziwne, nie zawsze, ale w 90%

Poniżej zamieszczam kod:

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />


    <title>Title</title>

    <meta name="description" content="Desc" />
    <meta name="keywords" content="Key-words" />

    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700&subset=latin-ext" rel="stylesheet">

    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script src="jquery.scrollTo.min.js"></script>


<script>

        jQuery(function($)
        {

            $.scrollTo(0);

            $('.scrollup').click(function() { $.scrollTo($('body'), 500); });
        }
        );


        $(window).scroll(function()
        {
            if($(this).scrollTop()>250) $('.scrollup').fadeIn();
            else $('.scrollup').fadeOut();
        }
        );


    </script>


        <script type="text/javascript">

            var numer = Math.floor(Math.random()*6)+1;

            var timer1=0;
            var timer2=0;

            function ustawslajd(nrslajdu)
            {
                clearTimeout(timer1);
                clearTimeout(timer2);
                numer = nrslajdu -1;
                schowaj();
                setTimeout("zmienslajd()", 500);
            }

            function schowaj()
            {
                $("#slider").fadeOut(500);
            }

            function zmienslajd()
            {
                numer++; if (numer>6) numer=1;

                var plik = "<img src=\"slajdy/slajd" + numer + ".jpg\" />";

                document.getElementById("slider").innerHTML = plik;
                $("#slider").fadeIn(500);

                timer1 = setTimeout("zmienslajd()", 5000);
                timer2 = setTimeout("schowaj()", 4500);


            }

        </script>

</head>

<body onload="zmienslajd()">
<br><br>

<div id="wrapper">

    <a href="#" class="scrollup"></a>

        <div id="logo">
            <a href="***"><img src="logo.jpg"></a>
        </div>

        <div id="haslo">
            <i>***</i>
        </div>

    <div id="container">

        <div id="menu">
            <a href="***" class="tilelink">
                <div class="option">***</div></a>
            <a href="***" class="tilelink">
                <div class="option">***</div></a>
            <a href="***" class="tilelink">
                <div class="option">***</div></a>
            <a href="***" class="tilelink" target="_blank">
                <div class="option">***</div></a>
            <a href="***" class="tilelink">
                <div class="option">***</div></a>
            <div style="clear: both;"></div>
        </div>

        <div id="content">

            SPORA ILOŚĆ CONTENTU

            <br><br>
            <div id="slider"></div>    <br><br>

        </div>
</div>

        <div id="footer">
            2016 &copy Wszystkie prawa zastrzeżone
        </div>
    </div>

</body>
</html>

mam też problem z tym, że po odpaleniu strony, przycisk opowiadający za scrolla do góry strony (strzałka) jest widoczny od razu. Znika dopiero po przwinięciu strony minimalnie do dołu, by pokazać się za chwilę w dobrym momencie.

Z góry dziękuję za pomoc

2 odpowiedzi

odpowiedź 22 grudnia 2016 przez niezalogowany
wybrane 22 grudnia 2016 przez N21

Najlepsza

Dzieje się tak ponieważ metoda jQuery fadeOut działa w ten sposób że na samym końcu element ma ustawnione css: display: none; Display:none usuwa go z obszaru ekranu, czyli rozmiar dokumentu się zmienia i przez to strona "skacze", użyj lepiej do tego animate lub wsadź, te zdjęcia do elementu ze stałymi rozmiarami.

komentarz 22 grudnia 2016 przez N21 Początkujący (290 p.)

Dziękuję bardzo.

Co do drugiej części mojego pytania, to rozwiązaniem było:

        jQuery(function($)
        {
            $.scrollTo(1);

zamiast

   jQuery(function($)
        {
            $.scrollTo(0);

natomiast sam nie wiem dlaczego.

Jeszcze raz bardzo dziękuje