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/
精彩评论