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
});
动画在悬停时起作用.怎么停止它？
谢谢.
使用 .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
});
| 归档时间： |
|
| 查看次数： |
11826 次 |
| 最近记录： |