анимация scrollTop прерывистая

Извините, мои навыки JavaScript ограничены, но я пытаюсь научиться.

Я пытаюсь сделать плавную анимацию прокрутки с вычислениями scrollTop, где div, размещенные абсолютно друг над другом, начинаются с нулевой ширины и растут друг за другом.

Установили скрипку, чтобы попытаться объяснить:

http://jsfiddle.net/vsP4e/1/

Проблема в том, что анимация действительно прерывистая и просто неправильная в определенных моментах. Кроме того, когда я обновляю браузер, мои div запускаются в совершенно неправильных местах и ​​возвращаются на место, когда я начинаю прокручивать.

В firebug расчеты часто ошибочны и, кажется, никогда не прекращаются, даже когда я не прокручиваю.

    $(document).ready(function() {  

        doStuff();

      $(document).scroll(function() {


        var levelScroll = $(document).scrollTop();


        doStuff();


          var show1 = $("#shaddow1").width();
          var c1w = $("#circle1").width();      
          var div1W = $("#div1").width();   

                    //div1
                    if(levelScroll>=0 && levelScroll<=200){
                      $("#div1").css("width", "0px");
                      $('#div1').css("margin-left", (-(div1W)/2));
                      $('#div1').css("margin-top", (-(div1W)/2));
                    }
                    else if(levelScroll>=200 && levelScroll<=500){
                      $("#div1").css("width", (levelScroll-200)+"px");
                      $('#div1').css("margin-left", (-(div1W)/2));
                      $('#div1').css("margin-top", (-(div1W)/2));

                    }
                    else if(levelScroll>=500){
                      $("#div1").css("width", "188px");
                      $("#div1").css("margin-left", "-94px");
                      $("#div1").css("margin-top", "-94px");
                    }

                    //circle1
                    if(levelScroll>=0 && levelScroll<=350){
                      $("#circle1").css("width", "0px");
                      $('#circle1').css("margin-left", (-(c1w)/2));
                      $('#circle1').css("margin-top", (-(c1w)/2));
                      $("#shaddow1").css("width", "0px");
                      $('#shaddow1').css("margin-left", (-(show1)/2));
                      $('#shaddow1').css("margin-top", (-(show1)/2));
                    }
                    else if(levelScroll>=350 && levelScroll<=650){
                      $("#circle1").css("width", (levelScroll-350)+"px");
                      $('#circle1').css("margin-left", (-(c1w)/2));
                      $('#circle1').css("margin-top", (-(c1w)/2));
                      $("#shaddow1").css("width", (levelScroll-300)+"px");
                      $('#shaddow1').css("margin-left", (-(show1)/2));
                      $('#shaddow1').css("margin-top", (-(show1)/2));

                    }
                    else if(levelScroll>=600){
                      $("#circle1").css("width", "232px");
                      $("#circle1").css("margin-left", "-116px");
                      $("#circle1").css("margin-top", "-116px");
                      $("#shaddow1").css("width", "232px");
                      $("#shaddow1").css("margin-left", "-116px");
                      $("#shaddow1").css("margin-top", "-116px");
                    }


                  });







    });

    function doStuff(){
            var show1 = $("#shaddow1").width();
            var c1w = $("#circle1").width();
            var div1W = $("#div1").width();

            $('#shaddow1').css("margin-left", (-(show1)/2));
            $('#shaddow1').css("margin-top", (-(show1)/2));

            $('#circle1').css("margin-left", (-(c1w)/2));
            $('#circle1').css("margin-top", (-(c1w)/2));

            $('#div1').css("margin-left", (-(div1W)/2));
            $('#div1').css("margin-top", (-(div1W)/2));
        }

animation jquery scrolltop
person HelenT    schedule 30.01.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вы используете одинаковые значения на разных слоях условия, это создаст конфликт. Вот пример из вашей функции:

if(levelScroll>=0 && levelScroll<=200){ ... }
else if(levelScroll>=200 && levelScroll<=500){ ... }
//this will create a conflict when levelScroll value came to 200

else if(levelScroll>350 && levelScroll<=650){ ... }
else if(levelScroll>=600){ ... }
//this equation also will create bigger problem

Вот работает jsFiddle.

Примечание. Я не буду предлагать использовать разные (в вашем примере у вас есть 2) условия прокрутки, это повышает вероятность ошибки, и большинство браузеров по-прежнему не могут обрабатывать эти расширенные анимации jQuery.

person Barlas Apaydin    schedule 30.01.2013
comment
Большое вам спасибо за помощь! Анимация по-прежнему немного прерывистая, но теперь div не просто слетает, а остается на месте :) - person HelenT; 31.01.2013