jQuery scroll auf 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>

Mit 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 funktioniert auf hover. , Wie es zu stoppen auf unhover?

Dank.

InformationsquelleAutor Happy | 2010-06-15

  1. 6

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

    wenn die Rückrufe sind nur die gleichen, Sie können dies auch tun,

    $(".bottom-link, .top-link").hover(function(){
    var $this = $(this);
    $("body").scrollTo($this, 3000);
},function(){
    $("body").stop();
    //stop on unhover
});
    Es ist sehr steil. Ich fügte hinzu, diese helfen ein wenig: $('body').stop().scrollTo('-=20px', 300);

    InformationsquelleAutor Reigel

Schreibe einen Kommentar