首先，请原谅我可能过度膨胀的 JS 函数。我的脚本中还有一些代码行可能会被删除。也就是说，我仍然习惯于 JS/jQuery，因此欢迎对我的脚本提出任何批评、建议或更正。
也就是说，我已经建立了一个脚本，可以通过摄影师作品集网站中的部分内容制作动画。该脚本似乎在台式计算机上运行良好，但移动性能充其量是笨拙的。所以，我在这里寻求有关如何优化我的脚本或添加一些代码来帮助平滑动画的帮助。
继承人的行动代码：http: //jsbin.com/icereg/2/edit
编辑：更新的 JSbin 项目： http ://jsbin.com/icereg/3/edit
以下是麻烦的动画功能：
// Bounce Top
function bounce_top() {
$isAnimating = 1;
$content.animate({top: '+=44'}, 200, 'easeInOutQuart',
function () {
$content.animate({top: '-=44'}, 200, 'easeInOutQuart');
$isAnimating = 0;
});
} // end bounce_top()
// Bounce Right
function bounce_right() {
$isAnimating = 1;
$content.animate({left: '-=44'}, 200, 'easeInOutQuart',
function () {
$content.animate({left: '+=44'}, 200, 'easeInOutQuart');
$isAnimating = 0;
});
} // end bounce_right()
// Bounce Bottom
function bounce_btm() {
$isAnimating = 1;
$content.animate({top: '-=44'}, 200, 'easeInOutQuart',
function () {
$content.animate({top: '+=44'}, 200, 'easeInOutQuart');
$isAnimating = 0;
});
} // end bounce_btm()
// Bounce Left
function bounce_left() {
$isAnimating = 1;
$content.animate({left: '+=44'}, 200, 'easeInOutQuart',
function () {
$content.animate({left: '-=44'}, 200, 'easeInOutQuart');
$isAnimating = 0;
});
} // end bounce_left()
// Scroll Content
function scroll_content() {
$isAnimating = 1;
if ($curr_section === ($total_section - 1) && ($event_target === 'down' || ($event_target === 'scroll' && $mouse_delta < 0))) {
// we're at the bottom; - 1 because of included 0 section;
bounce_btm();
} else if ($curr_section === 0 && ($event_target === 'up' || ($event_target === 'scroll' && $mouse_delta >= 0))) {
// we're already at the top
bounce_top();
} else if ($event_target === 'down' || $event_target === 'up' || $event_target === 'scroll' || $event_target === 'nav') {
// now either UP or DOWN inputs (mouse wheel, keyboad, nav links)
$nav_work_links.removeClass('active_nav');
$('#right_arrow').add('#left_arrow').remove();
if ($event_target === 'down' || ($event_target === 'scroll' && $mouse_delta < 0)) { // down or scroll down
$curr_section = $curr_section + 1;
$vertslidePos = '-=675';
} else if ($event_target === 'up' || ($event_target === 'scroll' && $mouse_delta >= 0)) { // up or scroll up
$curr_section = $curr_section - 1;
$vertslidePos = '+=675';
} else if ($event_target === 'nav') {
// now nav click inputs
$curr_section = $event_target_eq;
$vertslidePos = '-' + ($curr_section * 675);
}
if ($curr_page > 1) {
$content.animate({marginLeft: 0}, 450, 'easeInOutQuart'); // end .animate() method
}
$content.animate({top: $vertslidePos}, 450, 'easeInOutQuart',
function () {
if ($('.nav_work_items').eq($curr_section).index() === 0) {
$nav_work_links.removeClass('active_nav');
} else {
$('.nav_work_items').eq($curr_section - 1).find('.nav_work_links').addClass('active_nav');
}
$('.active_nav').before($left_arrow).after($right_arrow);
$curr_page = 1;
window.location.hash = '#work' + $curr_section;
$isAnimating = 0;
}); // end .animate() method
} else if ($event_target === 'left' || $event_target === 'right') {
// now either RIGHT or LEFT inputs
$right_arrow = $('#right_arrow');
$left_arrow = $('#left_arrow');
$active_nav = $('.active_nav');
$total_pages = $('#work' + $curr_section).children('.workcontent').length;
if ($curr_page === $total_pages && $event_target === 'right') {
bounce_right();
} else if ($curr_page === 1 && $event_target === 'left') {
bounce_left();
} else {
if ($event_target === 'right') {
$curr_page = $curr_page + 1;
$horzslidePos = '-=600px';
} else if ($event_target === 'left') {
$curr_page = $curr_page - 1;
$horzslidePos = '+=600px';
}
$content.animate({marginLeft: $horzslidePos}, 450, 'easeInOutQuart',
function () {
$isAnimating = 0;
}); // end .animate() method
}
}
} // end scroll_content();