javascript - Slowly scroll the content of a div on hover and stop on mouseoff -
please take @ website
i'm trying implement 2 arrows on top , bottom of gallery when people mouse on arrows, content scroll top , bottom respectively.
here code i'm using scrolls content down when hover on bottom arrow. there 2 issues it:
- i want scrolling stop when user mouses off
hopefully not display arrow(s) if there no more content left scroll
if ( $("body").hasclass('projects') ) { $("#jig1").height($(document).height() - 187); $("#scroll-to-bottom").hover( function () { $("#jig1").animate({ scrolltop: $(document).height() }, 10000); }, function () { } ); }
can offer improved solution?
answer seccond question. add inner wrapper divs blocks html should this
<div id="jig1"> <div id="jig1inner"> ... here put rest of code
if ($("body").hasclass('projects')) { $("#jig1").height($(document).height() - 187); var watchscrollers = function() { var tmp = $("#jig1inner").height() - $("#jig1").height(); if (tmp == $("#jig1").scrolltop()) { $("#scroll-to-bottom").css("visibility","hidden"); } else { $("#scroll-to-bottom").css("visibility","visible"); } if ($("#jig1").scrolltop() == 0) { $("#scroll-to-top").css("visibility","hidden"); } else { $("#scroll-to-top").css("visibility","visible"); } } $("#scroll-to-bottom").unbind("hover").hover(function() { $("#jig1").stop().animate({scrolltop: $("#jig1inner").height() - $("#jig1").height()}, 10000); }, function() { $("#jig1").stop(); //stops animation watchscrollers(); }); $("#scroll-to-top").unbind("hover").hover(function() { $("#jig1").stop().animate({scrolltop: 0}, 10000); }, function() { $("#jig1").stop(); //stops animation watchscrollers(); }); watchscrollers(); }
Comments
Post a Comment