tags:

views:

277

answers:

1
Q: 

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 scrollto 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.

+2  A: 

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
});
Reigel  2010-06-15 08:39:32

related questions

Communicating between websites (using Javascript or ?)
Javascript Unit-testing?
How can I return a variable from a $.getJSON function
Is there an "exists" function for jQuery
Why do I receive a q[num] error when aborting a jQuery queue pipeline?
How do I fire an event when a iframe has finished loading in jQuery?
How to compare html entity with JQuery
Problems while submitting a UTF-8 form textarea with JQuery/AJAX
How do I get the coordinates of the caret in text boxes?
SimpleModal breaks ASP.Net Postbacks
How would you handle errors when using jQuery.ajax() ?
Where is the best jQuery "plugins" library on the web?
Where can I learn jQuery? Is it worth it?
Keeping key value pairs together in HTML <select/> with JQuery?
How to set encoding in .getJSON JQuery
What is a selector engine?
Escaping HTML strings with jQuery
jQuery AJAX vs. UpdatePanel
What's the best way to code a desktop application-like menu bar in Javascript?
Dynamic Alphabetical Navigation
Scrolling Overflowed DIVs with JavaScript
How do I add a pre tag inside a code tag with jQuery?
Graph visualization code in javascript?
Wrapping lists into columns
Interview Questions for an Intern