开发者

JQuery variable scroll on hover. How can I cause it to ease after mouse out?

Ok, I'm going to try to explain this, but it's kind of difficult. Say I have some html like this,

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

Now, #wrapper has a set height, say 500px, and #scroll a longer height, say 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
      开发者_JAVA技巧          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)
    }
);

What this does now is, when the user hovers higher or lower in #wrapper, #scroll scrolls faster, with a dead area in the middle. But when the user scrolls off of #wrapper, it stops suddenly. Any ideas on how I can make this gracefully stop when the user stops hovering over #wrapper?

Optimizations to my code are also welcome.


Check out the jQuery event mouseout. I suggest you attach such an event to the wrapper and stop the animation smoothly from there using the speed variables you already have set.

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜