jQuery animate при прокрутке окна: параллельное перемещение большего количества объектов и нежелательная задержка объектов с фиксированной позицией CSS - PullRequest
Новая
       35

jQuery animate при прокрутке окна: параллельное перемещение большего количества объектов и нежелательная задержка объектов с фиксированной позицией CSS

0 голосов
/ 14 июля 2010

Я хочу переместить 4 объекта DOM, когда пользователь прокручивает страницу.

Вы можете проверить страницу, о которой я говорю, по этому адресу:
http://www.tessuti -arredo.it / новый / chi_siamo / Rassegna /

как пользователь прокручивает - я использую $ (окно) .scroll (function () - я проверяю, превышает ли window.scrollTop больше 10 пикселей, чтобы переместить несколько объекты. Это, кажется, работает нормально. но в выражении ELSE (я имею в виду, когда scrollTop меньше 10 пикселей) - и эти объекты должны возвращаться в исходное положение - у меня странное поведение, особенно на двух из 4 объектов, которые я перемещаю (два фиксированных объекта, которые я перемещаю вместе называем свой класс).

может быть, это немного сложно объяснить моим плохим английским, но если вы посмотрите на адрес, который я разместил выше, это довольно легко понять, просто попробуйте прокрутить страницу.

Объекты, которые я хочу переместить: - объект link (a), содержащийся внутри #header div = $ ("# header h1 a") - меню левой боковой панели вызывается с его id = $ ("# sidebar") - и два фиксированных div, главное горизонтальное меню и его фон, называемые их class = $ (". moveMenu")

Одна важная последняя вещь: с Firefox, похоже, все в порядке, во всех других браузерах у меня переменная задержка, которая выглядит как ошибка в моем коде.

Если говорить о моем коде, то вот он: 

$(document).ready(function(){

    $(window).scroll(function(){
     if($(this).scrollTop() > 10) {
        $("#sidebar").stop().animate({top:'119px'}, 100, function (){   
                        // some callback
                    });

        $("#header h1 a").stop().animate({marginTop:'30px'}, 100, function (){
                        // some callback
                 });

         $(".moveMenu").stop().animate({top:'0'}, 300, function (){
               // here i change the class of fixed objects to call them back on else statement
                 $(this).removeClass('moveMenu').addClass('moveMenu2');
               });

        }else{  

            // this is happening with unwanted delay
            $(".moveMenu2").stop().animate({top:'90'}, 300, function (){
                    $(this).removeClass('moveMenu2').addClass('moveMenu');
                });

            $("#sidebar").stop().animate({top:'89px'}, 100, function (){
                        $(this).css({'padding-top' : '40px'}); 
                });

            $("#header h1 a").stop().animate({marginTop:'0px'}, 100, function (){
                            // some callback
                });
            }
    });

});

Я знаю, что есть несколько пустых обратных вызовов, я просто держал их, чтобы они были готовы к заполнению чем-то, я пытался удалить их, ничего не изменилось.

Еще одна вещь, которую я попробовал, - это вызвать два объекта задержки с определенным идентификатором вместо класса, но ничего не пошло лучше ...

Я действительно надеюсь, что вы найдете ошибку в моем коде, я знаю, что я не так хорош.

1 Ответ

0 голосов
/ 15 июля 2010

Я испытываю сильное отставание только в IE, а в Firefox его минимальное, а в Chrome (мой браузер по умолчанию) задержки нет, но сценарий не сможет полностью анимироваться, если вы прокрутите вверх и вниз очень быстро.Window.onscroll запускает невероятное количество раз во время прокрутки - это то, что создает задержку.Было несколько попыток, которые я протестировал, чтобы решить эту проблему, и в основном они сводятся к минимизации количества операций, которые происходят каждый раз, когда происходит событие:

  1. Я начал с объединения двух элементов div 'mainmenubg'и 'mainmenu' в один div с классом 'moveMenu'.Это повышает эффективность, ссылаясь и анимируя только один элемент через $ ('. MoveMenu') и $ ('. MoveMenu2').

  2. Я создал три глобальные переменные javascript, используемые для ссылки на объекты во время прокруткисобытие.Каждый раз, когда вы вызываете $ ('что-то'), происходит поиск, но в этом случае на одни и те же объекты всегда ссылаются.Это повышает эффективность, удаляя «запросы» из самого события. 

    var asidebar = $("#sidebar");
var aheader = $("#header");
var amenu = $(".moveMenu");

    Затем в вашем внешнем файле JavaScript что-то вроде этого для каждого вызова анимации: amenu.stop().animate({top:'0'},300,function(){$(this).removeClass('moveMenu').addClass('moveMenu2');});

  3. Последнее, что я заметил, это то, что ваши анимационные вызовы происходят независимо от того, находятся ли ваши объекты на месте.Например, пользователь прокручивает страницу вниз, чтобы меню и заголовок анимировались в своих новых местах.Что ж, как только они появятся, нет никаких причин продолжать делать анимационные вызовы, пока пользователь продолжает прокручивать страницу вниз.Вместо этого следующая анимация должна происходить только тогда, когда пользователь достигает порога 10 пикселей и объекты должны перемещаться.Один из способов изменить это - создать глобальную переменную, которая может использоваться для определения необходимости анимации.Например: var change = 0; Затем в свой внешний файл добавьте вложенный оператор if, который проверяет ситуацию:

    if($(this).scrollTop() > 10){ if(change == 0){ ...animations... change = 1;}}

    else if( change == 1 ){ ...animations... change = 0;}

Как правило, это все для того, чтобы сделать ваш код более эффективным.

ОТВЕТ НА ВАШ ВТОРОЙ ВОПРОС:

Я не уверен, что вы имеете в виду, потому что у меня нет этой проблемы.Извините!

...