1

好的，我将尝试解释这一点，但这有点困难。说我有一些这样的html，

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

现在，#wrapper 有一个设定的高度，比如 500 像素，而 #scroll 有一个更长的高度，比如 3000 像素。

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 上时，关于如何优雅地停止此操作的任何想法？
也欢迎对我的代码进行优化。

4

1 回答 1

0

查看 jQuery 事件mouseout。我建议您将此类事件附加到包装器并使用您已经设置的速度变量从那里平稳地停止动画。

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

于 2011-04-23T22:15:08.817 回答