JQuery: анимированные полосы прокрутки вниз и снова прокрутки вверх

Question

Я пытаюсь анимировать панели умений на свитке, который у меня получился, но сейчас я пытаюсь сделать шаг вперед и снизить анимацию при прокрутке вверх.

поэтому при прокрутке до 330 баров будет анимироваться до ширины каждого делителя, и теперь я хочу прокрутить вверх, чтобы оживить до 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

Хорошо, спустя некоторое время игры с моим оператором if else, я понял, что моя анимация не перестала воспроизводиться, чтобы вернуться к моему первоначальному размеру.

поэтому я добавил следующее:

$(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             
    }
    });
});