jQuery - функция setInterval () с / .animate () работает медленно - PullRequest
Новая
       17

jQuery - функция setInterval () с / .animate () работает медленно

0 голосов
/ 07 января 2012

Раньше это работало, но внезапно остановилось, и я не уверен, что изменилось.

Обзор: у нас есть HTML ... 

<div id="side">
  <ul id="photos">
    <li><img... </li>
    <li><img... </li>
    <li><img... </li>
    ...
  </ul>
</div>

Естьdiv фиксированной высоты, position:fixed и overflow:hidden, внутри него есть <ul> с высотой, превышающей высоту вмещающих <div> и position;absolute.Идея состоит в том, что когда пользователь наводит курсор на нижнюю часть #side, #photos прокручивается вверх.Я настроил прокрутку быстрее ~ 5px, к краям и медленнее ~ 1px к середине.

Проблема в том, что он движется очень медленно.как он будет двигаться вверх на 1 пиксель, а затем ждать, а затем двигаться вверх еще на один пиксель.Я установил интервал в 10, который должен быть довольно быстрым и работал довольно хорошо ранее.

Итак, вот сценарий, в конце используется функция-получателя setInterval(), остальное предоставляется на всякий случай.

    var move_up, move_dn,
    hoverInterval,
    yPos,           //y position on slider
    objHeight,      //Height of slider
    posPercent;     //y axis percent on the slider


function movable(){
    container = $("#side");
    slider    = $("#photos");
    position  = slider.position().top;
    limit     = 0 - slider.height() + container.height()
    if(position >= 0)
        {return('top');}
    else if(position <= limit)
        {return('bottom');}
}

function scroll_div(a){ //a=amount to move
    $("#photos").animate({"top":"-="+a+"px"},"slow","easeOutExpo").stop("true","true");
}   

function move_div(){
    place = movable();
    move = (Math.pow(((100*yPos)/objHeight)-50,3)/20000);
    if (move < 0){
        if (place != 'top'){
            scroll_div(move)
        }
    }else{
        if (place != 'bottom'){
            scroll_div(move)
        }
    };
}   

$("#side").mousemove(function(e){
    objHeight = this.offsetHeight
    yPos = e.pageY - this.offsetTop;
    //offset = parseFloat($("#photos").css("top")) superfluous
});

$("#side").hover(
    function(){hoverInterval = setInterval(move_div,10)},
    function(){clearInterval(hoverInterval)
    });

1 Ответ

0 голосов
/ 07 января 2012

Ваш вызов .stop("true", "true"), вероятно, не работает, потому что вы передаете строки вместо логического true.Глядя на код jQuery, для .stop(), когда первый аргумент является строкой, jQuery думает, что вы передаете имя очереди.Поскольку нет имени очереди с именем "true", вызов .stop(), вероятно, ничего не делает.Даже если это сработало, это должно быть до, а не после вашего звонка на .animate().Это означает, что вы фактически накапливаете 600/10 = 60 анимаций, запущенных одновременно, потому что вы запускаете новую анимацию 600 мс каждые 10 мс.Запуск 60 анимаций одновременно на одном и том же объекте, вероятно, является частью того, что вас запутывает.

Ваш одушевленный вызов должен выглядеть следующим образом: 

$("#photos").stop(true, true).animate({"top":"-="+a+"px"},"slow","easeOutExpo");

И вам нужно либо получитьизбавьтесь от setInterval() вызова в .hover() или измените его время на что-то, что будет более совместимо с анимацией 600 мс, которую вы делаете.Остановка и перезапуск анимации 600 мс каждые 10 мс не будут делать то, что вы хотите.

...