jQuery scroll on hover_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-03 17:20 出处：网络

HTML: <body> <div class=\"top-corner\"></div>  <div class=\"bottom-corner\"></div>

相关专题：jquery scroll

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/

$(".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
});