jQuery的航點功能

Question

我是新來的jQuery，我不知道如何做很多。

我有jQuery waypoint plugin，我也有一個動畫進度條的功能。我需要做的是在達到航點時爲進度條設置動畫效果。我有兩段代碼，但似乎不能將它們放在一起。

我需要把這個：

$(function() { 
    $(".meter > span").each(function() { 
     $(this) 
      .data("origWidth", $(this).width()) 
      .width(0) 
      .animate({ 
       width: $(this).data("origWidth") 
     }, 1200); 
    }); 
}); 

，在這裏面：

$(function() { 
    $('#skills-1').waypoint(function() { 
     (function here) 
    }); 
}); 

Answer 1

$(function() { 
    $('#skills-1').waypoint(function() { 
     $(".meter > span").each(function() { 
      $(this) 
       .data("origWidth", $(this).width()) 
       .width(0) 
       .animate({ 
        width: $(this).data("origWidth") 
      }, 1200); 
     }); 
    }); 
}); 

只要把裏面，沒有功能的包裝。

或者，如果你有多個航點，這是更好地做一個獨立的功能，如：

function animateProgressBar(){ 
    $(".meter > span").each(function() { 
     $(this) 
      .data("origWidth", $(this).width()) 
      .width(0) 
      .animate({ 
       width: $(this).data("origWidth") 
     }, 1200); 
    }); 
} 
$('#skills-1').waypoint(animateProgressBar); 
$('#skills-2').waypoint(animateProgressBar);