jquery: animate bars on scroll down and again on scroll up

admin

Administrator
Staff member
I am trying to animate skill bars on scroll which I got working but now im trying to go a step further and bring the animation down when you scroll back up.

so on scroll to 330 bars will animate to each divs width and now i want to on scroll up to animate back to 0 width

JS:

Code:
> $(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:

Code:
> #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:

<blockquote>

</blockquote>

Code:
&lt;div id="height"&gt;&lt;/div&gt;
&gt; 
&gt; &lt;ul&gt;
&gt;     &lt;li&gt;HTML&lt;/li&gt;
&gt;     &lt;li id="html" class="full"&gt;&amp;nbsp&lt;/li&gt;
&gt;     &lt;li&gt;CSS&lt;/li&gt;
&gt;     &lt;li id="css"&gt;&lt;/li&gt;
&gt;     &lt;li&gt;Javascript&lt;/li&gt;
&gt;     &lt;li id="javascript"&gt;&lt;/li&gt;
&gt;     &lt;li&gt;PHP&lt;/li&gt;
&gt;     &lt;li id="php"&gt;&lt;/li&gt;
&gt;     &lt;li&gt;MySQL&lt;/li&gt;
&gt;     &lt;li id="mysql"&gt;&lt;/li&gt;
&gt;     &lt;li&gt;Wordpress&lt;/li&gt;
&gt;     &lt;li id="wordpress"&gt;&lt;/li&gt; &lt;/ul&gt;