Переменная прокрутки JQuery при наведении курсора.Как я могу заставить его ослабить после мыши? - PullRequest
Новая
       38

Переменная прокрутки JQuery при наведении курсора.Как я могу заставить его ослабить после мыши?

1 голос
/ 24 апреля 2011

Хорошо, я попытаюсь объяснить это, но это довольно сложно. Скажем, у меня есть HTML, как это, 

<div id="wrapper">
    <div id="scroll">
        <!--content-->
    </div>
</div>

Теперь #wrapper имеет заданную высоту, скажем, 500px, и #scroll больше высоты, скажем, 3000px. 

var hoverInterval, yPos, offset, objHeight

$("#wrapper").mousemove(function(e){
    //when the mouse moves in #wrapper, find the height of the object
    //and the relative position of the mouse within the object.
    objHeight = this.offsetHeight
    yPos = e.pageY - this.offsetTop;
});
$("#wrapper").hover( //when the user hovers w/i #wrapper...
    function(){
        hoverInterval = setInterval(function(){
            factor = (100*yPos)/objHeight //gives a range from 0-100
            move = ( -3+( ( Math.pow(factor-50,2))/56))/8
                      /*this provides a bell curve, so that as 
                       *the user hovers closer to the extremes,
                       */#scroll will scroll faster up and down.
                if ( move > 0 ) { //prevents movement when in the middle
                if (yPos <= objHeight*.5 ) {
                    $("#photos").animate(
                          {"top":"+="+move+"px"},"slow","easeOutExpo")
                          .stop("true","true")
                }
                else if (yPos >= objHeight*.5){
                    $("#photos").animate(
                          {"top": "-="+move+"px"},"slow","easeOutExpo")
                          .stop("true","true")
                }
            }
        },10); //setInterval's timeout
    },
    function(){ //and stop at mouse off.
        clearInterval(hoverInterval)
    }
);

Теперь это происходит, когда пользователь перемещается выше или ниже в #wrapper, #scroll прокручивается быстрее, с мертвой областью в середине. Но когда пользователь прокручивает #wrapper, он внезапно останавливается. Любые идеи о том, как я могу сделать это изящно, когда пользователь перестанет зависать над #wrapper?
Оптимизация моего кода также приветствуется.

1 Ответ

0 голосов
/ 24 апреля 2011

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

http://api.jquery.com/mouseout/

...