優化jQuery動畫以獲得更好的移動性能？

Question

首先，請原諒我可能過度膨脹的JS函數（s）..也有一些代碼在我的腳本，可能會被刪除。這就是說，我仍然習慣於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(); 

Answer 1

我是，現在仍然是一個JS的n00b，然後我的代碼是這樣過度臃腫。一些簡單的合併和重新制定確實有幫助。然而，還有這個JS插件，這些天，以幫助順利JS動畫：

Velocity.js

.....以及那些可能降落在這裏的未來，這裏的東西甚至更好：

GSAP