2010-06-15 4 views
1

HTML:JQuery прокрутки при наведении курсора мыши

<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 
}); 

Анимация работает на парении. Как остановить его на открытом воздухе?

Спасибо.

ответ

6

использование .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 
}); 
+0

Это очень крутой. Я добавил это, чтобы немного помочь: $ ('body'). Stop(). ScrollTo ('- = 20px', 300); –

Смежные вопросы