Question

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>

使用scrollto插件 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
});

动画在悬停时起作用。 如何在停用时阻止它？

感谢。

Answer 1

使用.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
});

如果回调是相同的，你也可以这样做，

$(".bottom-link, .top-link").hover(function(){
    var $this = $(this);
    $("body").scrollTo($this, 3000);
},function(){
    $("body").stop();
    // stop on unhover
});

jQuery滚动悬停

1 个答案: