我想构建一个页面滚动器。它是这样工作的:
- 你在
page 1
幻灯片上,向下滚动鼠标 - 你正在(使用
animate
)向下滚动到page 2
- 向上/向下滚动是这样的:))
我的问题是 - 当我在动画期间滚动多次时,它会卡住。我怎样才能防止这种情况?
我的幻灯片代码在这里:
function scrollPages() {
$('section.main').each(function() {
var prevSection = $(this).prev('section.main'),
nextSection = $(this).next('section.main'),
id = $(this).attr('id'),
scrollFunc = function(dest) {
$('body, html').stop().animate({
scrollTop: dest
}, 'slow');
}
function goUp() {
if(prevSection.attr('id') != undefined) {
var scrollTo = prevSection.offset().top;
if(prevSection.attr('id') == 'hi') {
$('div.animation').children('div.first').stop().animate({ top: '0' },823);
$('div.animation').children('div.secound').stop().animate({ left: '0' },933);
$('div.animation').children('div.third').stop().animate({ top: '146px' },559);
$('div.animation').children('div.fourth').stop().animate({ top: '30px' },1085);
$('div.animation').children('div.fifth').stop().animate({ left: '60px' },860);
$('div.animation').children('div.sixth').stop().animate({ top: '30px' },798);
$('div.animation').children('div.seventh').stop().animate({ left: '0' },869);
}
scrollFunc(scrollTo)
}
}
function goDown() {
if(nextSection.attr('id') != undefined) {
var scrollTo = nextSection.offset().top;
if(id == 'hi') {
$('div.animation').children('div.first').stop().animate({ top: '-999px' },423);
$('div.animation').children('div.secound').stop().animate({ left: '-1509px' },533);
$('div.animation').children('div.third').stop().animate({ top: '-999px' },359);
$('div.animation').children('div.fourth').stop().animate({ top: '-999px' },785);
$('div.animation').children('div.fifth').stop().animate({ left: '1999px' },560);
$('div.animation').children('div.sixth').stop().animate({ top: '-999px' },498);
$('div.animation').children('div.seventh').stop().animate({ left: '-9999px' },569);
}
scrollFunc(scrollTo);
}
}
$(this).on('mousewheel', function(event, delta) {
if(delta > 0) {
goUp();
} else {
goDown();
}
});
})
}