Question

我需要使用动画来解决我的问题而不是滚动div。如果我将此代码设置为此函数，我的意思是代码的这一部分

$('#bar'+dataNr).find('span').removeClass().addClass(dataColor).animate({width: dataWidth});

一切正常，所有事件，如mouseenter，movemose等。当我在页面滚动时尝试设置此进度条的动画时，这不起作用。这是我的代码https://jsfiddle.net/y2th0cwk/

＆＃13;

$(window).scroll(function(){
  var dataColor = $(this).data('color');
  var dataWidth = $(this).data('width');
  var dataNr = $(this).data('nr');

  if($(this).scrollTop()>0){
  $('#bar'+dataNr).find('span').removeClass().fadeIn(1000).addClass(dataColor).animate({width: dataWidth});
	}else{
   $('#bar'+dataNr).find('span').removeClass(dataColor);
 	}
});

＆＃13;

.progress-bar {
    background-color: rgba(0,0,0,0.7);
    height: 25px;
    padding: 5px;
    width: 300px;

    border-radius: 5px;
  }

.progress-bar span {
    display: inline-block;
    height: 100%;
    width: 0;
    border-radius: 3px;
}

.blue {
    background-color: #34c2e3;
}

＆＃13;

<div class="container skillsBar">
      <h2>Skills</h2>
      <div class="skills1">
        <p class="changeBar" data-width="30%" data-color="blue" data-nr="1">PHP/WordPress</p>
          <div id="bar1" class="progress-bar">
            <span></span>
          </div>
      </div>
</div>

＆＃13;

Answer 1

为什么我的数据错了？我需要从HTML中获取数据以在滚动此div时设置进度条。当我放$('#bar'+dataNr).find('span').removeClass().fadeIn(1000).addClass(dataColor).animate({width: dataWidth});进度条工作时。在我的情况下，当你用progres条滚动div时，想要激活进度条。

https://jsfiddle.net/k5gc96ex/

滚动div（如果可见）时，在此div上启动jQuery脚本

1 个答案: