如何在页面视图中触发 jQuery？

Question

我希望在从导航栏中选择该部分或在滚动视图中时启动此动画。
示例代码：
HTML：

    <section id="section-skills" class="section appear clearfix">
            <div class="container">
                <div class="row mar-bot40">
                    <div class="col-md-offset-3 col-md-6">
                        <div class="section-header">
                            <h2 class="section-heading animated" data-animation="bounceInUp">Skills</h2>
    </div>
</div>
</div>
</div>
<div class="container">
                <div class="row" >
                <div class="col-md-6">
<div class="skillbar clearfix " data-percent="80%">
    <div class="skillbar-title" style="background: #333333;"><span>Java</span></div>
    <div class="skillbar-bar" style="background: #525252;"></div>
    <div class="skill-bar-percent">75%</div>
</div> <!-- End Skill Bar -->

<!--REST OF THE CODE FOLLOWS AS IN THE EXAMPLE LINK PROVIDED-->

 </section>

我尝试在 jQuery 中使用 waypoint，但它不起作用。

jQuery(document).ready(function(){
  $('#section-skills').waypoint(function(direction) {  
    jQuery('.skillbar').each(function(){
        jQuery(this).find('.skillbar-bar').animate({
            width:jQuery(this).attr('data-percent')
        },6000);
    });
});
});

任何解决方案都会很有帮助。

Answer 1

当元素在视口中时，使用jQuery Appear 存储库启动动画。

这里是示例代码

HTML：

    <!-- Progress Bars -->
<div class="skills-wrap">
    <div class="container">
        <!-- Blue progress bars -->
        <h1 class="text-center">BLUE PROGRESS BARS</h1>
        <div class="skills progress-bar1">
            <ul class="col-md-6 col-sm-12 col-xs-12">
                <li class="progress">
                    <div class="progress-bar" data-width="85">
                        Wordpress 85%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="65">
                        Graphic Design 65%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="90">
                        HTML/CSS Design 90%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="60">
                        SEO 60%
                    </div>
                </li>
            </ul>
            <ul class="col-md-6 col-sm-12 col-xs-12 wow fadeInRight">
                <li class="progress">
                    <div class="progress-bar" data-width="75">
                        Agencying 75%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="95">
                        App Development 95%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="70">
                        IT Consultency 70%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="90">
                        Theme Development 90%
                    </div>
                </li>
            </ul>
        </div>
        <!-- /Blue progress bars -->
    </div>
</div>

CSS：

.progress {
    height: 35px;
    line-height: 35px;
    margin-bottom: 45px;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    list-style: none;
}

.progress-bar {
    font-weight: 600;
    line-height: 35px;
    padding-left: 20px;
    text-align: left;
}

.progress-bar1 .progress-bar {
    background: #026ea6;
}

脚本：

jQuery(document).ready(function () {

/*----------------------------------------------------*/
/*  Animated Progress Bars
/*----------------------------------------------------*/

    jQuery('.skills li').each(function () {
        jQuery(this).appear(function() {
          jQuery(this).animate({opacity:1,left:"0px"},800);
          var b = jQuery(this).find(".progress-bar").attr("data-width");
          jQuery(this).find(".progress-bar").animate({
            width: b + "%"
          }, 1300, "linear");
        }); 
    });   

});

现场演示在Bootstrap Animated Progress Bar

Answer 2

给你。我创建了一支新笔Progress Bars

您所要做的就是使用此脚本在动画出现在视口中时运行它。

jQuery(document).ready(function(){
    jQuery('.skillbar').each(function(){
        jQuery(this).appear(function() {
            jQuery(this).find('.skillbar-bar').animate({
                width:jQuery(this).attr('data-percent')
            },6000);
        });
    });
});

别忘了在您的网站上添加jQuery Appear 脚本。如果您仍有任何问题，请告诉我。

Answer 3

使用 .position().top 获取 .skillbar 的顶部位置。

然后使用 .scroll() 事件通过 .scrollTop().valueOf() 获取窗口滚动到的当前位置。

当 .scrollTop 值足够接近 .skillbar 的顶部位置时，该元素必须在视图中，因此您可以将其设置为何时调用动画的条件。

jQuery(document).ready(function(){
  var skillBarTopPos = jQuery('.skillbar').position().top;
  jQuery(document).scroll(function(){
    var scrolled_val = $(document).scrollTop().valueOf();
    if(scrolled_val>skillBarTopPos-250) startAnimation();
  });

  function startAnimation(){
    jQuery('.skillbar').each(function(){
      jQuery(this).find('.skillbar-bar').animate({
        width:jQuery(this).attr('data-percent')
      },6000);
    });
  };

});

http://api.jquery.com/position/

How to detect scroll position of page using jQuery

http://api.jquery.com/scrollTop/#scrollTop2