javascript автопрокрутка с возможностью добавления и минимизации скорости без уничтожения анимированного события - PullRequest
Новая
       8

javascript автопрокрутка с возможностью добавления и минимизации скорости без уничтожения анимированного события

0 голосов
/ 30 мая 2018

Пожалуйста, помогите!Я сделал приложение с плавной прокруткой, используя jquery jquery.min.js, все работает отлично, и он очень хорошо прокручивает вниз и вверх, он делает скорость быстрее и медленнее, НО !!!!!каждый раз, когда я хочу сделать прокрутку быстрее или медленнее, предыдущая анимация останавливается и новая анимация начинается снова с новой скоростью (время до конца).Может ли кто-нибудь помочь мне найти способ не убивать прошлые события («которые прекращают прокрутку»).

Вот моя основная функция ниже.Любая помощь будет благодарна.

//User can enter the wanted time to read (smooth) the whole text.
//if user did not enter any value => i will take the height of the whole document and multiply it by 25 (since normal person can read 25 word per minute)



    var w = $(window);
    var n = Math.max($(document).height(), $(window).height());
    var Speed = $("#<%=txtConsiderTime.ClientID%>").val();
    var offset = $("#fixedBar").offset();
  if (Speed == "" || Speed == null)
    {
        fixedSize = documentHeight;
        var documentHeight = Math.max($(document).height(), $(window).height());
        Speed = documentHeight * 25;
    }
    else
    {
        Speed = Speed * 60000;
    }
    var smallHeight;

    var TimesOfFaster = 0;
    var TimesOfSlower = 0;

    $(document).ready(function ()
    {

        var newSpeed = ($(window).scrollTop() * 25);


        var $element = $("html,body");
        var IsDown = false;
        var IsUp = false;

        $("body").keydown(function (e)
        {
            var n = Math.max($(document).height(), $(window).height());
            var $element = $("html,body");
            var offset = $("#fixedBar").offsetParent();
            var w = $(window);
            var y = offset.top - w.scrollTop();           


            //Going Up
            if (e.keyCode == 38)
            {
                newSpeed = ($(window).scrollTop() * 25);
                $('html, body').stop().animate({ scrollTop: 0 }, newSpeed);
                IsDown = false;
                IsUp = true;              
            }

                //Going Down 
            else if (e.keyCode == 40)
            {                
                $('html, body').stop().animate({ scrollTop: n }, Speed);
                IsDown = true;
                IsUp = false;                
            }

             //slower
            else if (e.keyCode == 37)
            {
                if (IsDown)
                {                    
                     Speed = Speed + (Speed/15);
                    $('html, body').stop().animate({ scrollTop: n }, Speed);                    
                }
                else if (IsUp)
                {
                    TimesOfSlower += 2;
                    if (TimesOfFaster >= 2)
                    {
                        TimesOfFaster -= 1;
                    }


                    //newSpeed = newSpeed + (newSpeed / 10);
                    if (15 - TimesOfSlower >= 0)
                    {
                        var result = newSpeed + (newSpeed / (15 - TimesOfSlower));
                        $('html, body').stop().animate({ scrollTop: 0 }, result);
                    }


                }
            }
                //faster
            else if (e.keyCode == 39)
            {               
                if (IsDown)
                {
                    Speed = Speed -(Speed/25);
                    $('html, body').stop().animate({ scrollTop: n }, Speed);                    
                }
                else if (IsUp)
                {
                    TimesOfFaster += 2;
                    if (TimesOfSlower > 2)
                    {
                        TimesOfSlower -= 1;
                    }

                    //newSpeed = newSpeed - (newSpeed / 25);
                    var result = newSpeed - (newSpeed / (15 + TimesOfFaster));

                    $('html, body').stop().animate({ scrollTop: 0 }, result);
                }
            }
            else if (e.keyCode == 32)
            {
                //$('html,body').closest('p').stop(true,false);
                $('html,body').stop(true, false);
            }

    });
    });

1 Ответ

0 голосов
/ 30 мая 2018

Хорошо, я понял, что вы пытались реализовать анимацию с помощью jQuery.Имейте в виду, что базовая анимация jQuery для чего-то простого.Если вам нужно так много контроля, попробуйте что-то еще, например:

...