jQuery scroll on hover
HTML:
<body>
<div class="top-corner"></div> <!-- absolute, top: 0 -->
<div class="bottom-corner"></div> <!-- absolute, bottom: 0 -->
<a href="#" class="top-link">top</a> <!-- fixed, top 50%, left 0 -->
<a href="#" class="bottom-link">bottom</a> <!-- fixed, top 60%, left 0 -->
<div style="padding: 1500px 0;"></div> <!-- for scroll test -->
</body>
Using scro开发者_Go百科llto plugin http://demos.flesler.com/jquery/scrollTo/
JS
$(".top-link").hover(function(){
$("body").scrollTo($(".top-corner"), 3000);
},function(){
// stop on unhover
});
$(".bottom-link").hover(function(){
$("body").scrollTo($(".bottom-corner"), 3000);
},function(){
// stop on unhover
});
Animation works on hover. How to stop it on unhover?
Thanks.
use .stop()
$(".top-link").hover(function(){
$("body").scrollTo($(".top-corner"), 3000);
},function(){
$("body").stop();
// stop on unhover
});
$(".bottom-link").hover(function(){
$("body").scrollTo($(".bottom-corner"), 3000);
},function(){
$("body").stop();
// stop on unhover
});
if the callbacks are just the same, you can also do this,
$(".bottom-link, .top-link").hover(function(){
var $this = $(this);
$("body").scrollTo($this, 3000);
},function(){
$("body").stop();
// stop on unhover
});
加载中,请稍侯......
精彩评论