[英]jquery: animate bars on scroll down and again on scroll up
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 所以在滚动到330条时将为每个div宽度设置动画,现在我要在滚动时将其动画返回0宽度
JS: 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: 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: HTML:
<div id="height"></div>
>
> <ul>
> <li>HTML</li>
> <li id="html" class="full"> </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>
Alright well after a little while of playing with my if else statement I realized that my animation didnt stop playing in order to go back to my original size. 经过一段时间的if else语句播放后,我意识到我的动画并没有停止播放以便恢复到原始大小。
so I added the following: 所以我添加了以下内容:
$(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
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.