jquery：動畫欄向下滾動，再次向上滾動

Question

我正在嘗試在滾動條上爲我工作的技能欄添加動畫，但現在我試着更進一步，並在向後滾動時將動畫放下。

等滾動到330條將要設置動畫的每個div的寬度，現在我想在向上滾動動畫回到0寬度

JS：

> $(document).ready(function(){ $(document).scroll(function() { var top 
> = $(document).scrollTop(); console.log(top); 
>  if (top > 330) { 
>   $("#html, #css").animate({width:"100%"}, 2000); 
>  } else { 
>   $("#html, #css").animate({width:"0%"}, 2000); /* not working */ 
>  } 
>  
>  
>  if (top > 330) $("#javascript").animate({width:"70%"}, 2000); 
>  if (top > 330) $("#php").animate({width:"50%"}, 2000); 
>  if (top > 330) $("#mysql").animate({width:"30%"}, 2000); 
>  if (top > 330) $("#wordpress").animate({width:"60%"}, 2000); 
>  }); }); 

CSS：

> #height { height:1000px; } 
> 
> ul { 
>  list-style-type: none; 
>  font-family: 'Open Sans'; 
>  color: #787878; 
>  font-size: 0.8em; 
>  font-weight: 500; 
>  font-style: italic; 
>  line-height: 160%; 
>  letter-spacing: 1px; } 
> 
> } li { 
>  padding: 2px 0 2px 0; } 
> 
> #html, #css, #javascript, #php, #mysql, #wordpress { 
>  background-color: #0194bd; 
>  width: 0%; 
>  height: 9px; 
>  margin-bottom: 10px; } 

HTML：

<div id="height"></div> 
> 
> <ul> 
>  <li>HTML</li> 
>  <li id="html" class="full">&nbsp</li> 
>  <li>CSS</li> 
>  <li id="css"></li> 
>  <li>Javascript</li> 
>  <li id="javascript"></li> 
>  <li>PHP</li> 
>  <li id="php"></li> 
>  <li>MySQL</li> 
>  <li id="mysql"></li> 
>  <li>Wordpress</li> 
>  <li id="wordpress"></li> </ul> 

Answer 1

後好了好一會兒與我如果else語句打我意識到，我的動畫didnt停止以回到我原來的大小播放。

所以我增加了以下內容：

$(document).ready(function(){ 
$(document).scroll(function() { 
var top = $(document).scrollTop(); 
console.log(top); 
    if (top > 330) { 
     $("#html, #css").animate({width:"100%"}, 2000); 
    } else { 
     $("#html, #css").stop(true).animate({width:"0"}, '2000'); <--- this line    
    } 
    }); 
});