在滚动时触发JQuery多次复制百分号

时间：2017-09-04 04:02:49

标签： javascript jquery

我有4个进度条，当我向下滚动到可见位置时，百分比显示多次。我正在尝试解决这个问题，但是我把所有的时间都花在了我身上。当我添加jquery代码以便在滚动时触发动画时，我得到所有的重复。 任何建议将不胜感激。

 $(window).scroll( function(){

    var bottom_of_window = $(window).scrollTop() + $(window).height();
   
	        $(".skills").addClass("active")
$(".skills .skill .skill-bar span ").each(function() {
   $(this).animate({
      "width": $(this).parent().attr("data-bar") + "%"
   },0);
 
   $(this).append('<b>' + $(this).parent().attr("data-bar") + '%</b>');
});


setTimeout(function() {
   $(".skills .skill .skill-bar  span b ") .animate({"opacity":"1"},1000);
}, 2000);
      });
/*SKILLS*/
.skills,
.skills .skill,
.skills .skill ,
.skills .skill .skill-bar {
   width: 100%;
   float: left;
}

.skill-title{
  float:left;
}

.skills {
   padding:13px;
  margin-top:10%;
}

.skills .skill {
   margin-bottom: 30px;
  
}

.skills .skill .skill-title {
   color: black;
   margin-bottom: 10px;
   font-weight: 400;
   font-size: 139%;
  opacity:.8;
  
}

.skills .skill .skill-bar {
   width: 0;
   height: 16px;
   background: #f0f0f0;
   transition: 1s cubic-bezier(1, 0, .5, 1);
   -webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
   -ms-transition: 1s cubic-bezier(1, 0, .5, 1);
  
}

.skills.active .skill .skill-bar {
   width: 100%;
  
}

.skills .skill .skill-bar span {
   float: left;
   width: 0%;
   background: #1D91F2;
   height: 15px;
   position: relative;
   transition: 1s cubic-bezier(1, 0, .5, 1);
   -webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
   -ms-transition: 1s cubic-bezier(1, 0, .5, 1);
  
}

.skills .skill .skill-bar span b {
   float: left;
   width: 100%;
   position: relative;
   text-align: right;
   opacity: 0;
   font-size: 145%;
   color: #1D91F2;
   font-weight: 400;
   top: -30px;
  
}


.info-list{
  font-size:25px;
  list-style: none;
  text-align: left;
  letter-spacing: .4rem;
	line-height: 4.1rem;
	  margin-top:10%;
 
  
}

.skills-part{
  width: 100%;
  max-width: 700px;
  
}


.h9-information{
   font-family: 'Squada One', cursive;

}

.h10-skills{
 font-family: 'Squada One', cursive;  
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skills-part col-md-6">
  <h10 class="h10-skills"style="font-size:30px; opacity:0.9;"><strong>SKILLS</strong></h10>
<div class="skills">
   <!-- skill -->
   <div class="skill">
      <!-- title -->
      <div class="skill-title"><strong>
         HTML5</strong>
      </div>
      <!-- bar -->
      <div class="skill-bar" data-bar="90"><span></span></div>
   </div>
   <!-- #skill -->
   <!-- skill -->
   <div class="skill">
      <!-- title -->
      <div class="skill-title"><strong>
         CSS3
      </strong></div>
      <!-- bar -->
      <div class="skill-bar" data-bar="70"><span></span></div>
   </div>
   <!-- #skill -->
   <!-- skill -->
   <div class="skill">
      <!-- title -->
      <div class="skill-title"><strong>
         JQUERY
      </strong></div>
      <!-- bar -->
      <div class="skill-bar" data-bar="60"><span></span></div>
   </div>
   <!-- #skill -->
   <!-- skill -->
   <div class="skill">
      <!-- title -->
      <div class="skill-title"><strong>
         JAVASCRIPT
      </strong></div>
      <!-- bar -->
      <div class="skill-bar" data-bar="80"><span></span></div>
   </div>
   <!-- #skill -->
</div>

You can see all the duplicating

2 个答案:

答案 0 :(得分：1)

不是连续追加数据，只需更新html，如下所示：

$(this).html('<b>' + $(this).parent().attr("data-bar") + '%</b>');

答案 1 :(得分：1)

在以下代码行中

$(this).append('<b>' + $(this).parent().attr("data-bar") + '%</b>'); });

将append更改为html

<强>正确

$(this).html('<b>' + $(this).parent().attr("data-bar") + '%</b>'); });

append()的作用是不断向元素添加内容，而html()会覆盖其内容。

＆＃13;
＆＃13; 
$(window).scroll( function(){

    var bottom_of_window = $(window).scrollTop() + $(window).height();
   
	        $(".skills").addClass("active")
$(".skills .skill .skill-bar span ").each(function() {
   $(this).animate({
      "width": $(this).parent().attr("data-bar") + "%"
   },0);
 
   $(this).html('<b>' + $(this).parent().attr("data-bar") + '%</b>');
});


setTimeout(function() {
   $(".skills .skill .skill-bar  span b ") .animate({"opacity":"1"},1000);
}, 2000);
      });
＆＃13; 
/*SKILLS*/
.skills,
.skills .skill,
.skills .skill ,
.skills .skill .skill-bar {
   width: 100%;
   float: left;
}

.skill-title{
  float:left;
}

.skills {
   padding:13px;
  margin-top:10%;
}

.skills .skill {
   margin-bottom: 30px;
  
}

.skills .skill .skill-title {
   color: black;
   margin-bottom: 10px;
   font-weight: 400;
   font-size: 139%;
  opacity:.8;
  
}

.skills .skill .skill-bar {
   width: 0;
   height: 16px;
   background: #f0f0f0;
   transition: 1s cubic-bezier(1, 0, .5, 1);
   -webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
   -ms-transition: 1s cubic-bezier(1, 0, .5, 1);
  
}

.skills.active .skill .skill-bar {
   width: 100%;
  
}

.skills .skill .skill-bar span {
   float: left;
   width: 0%;
   background: #1D91F2;
   height: 15px;
   position: relative;
   transition: 1s cubic-bezier(1, 0, .5, 1);
   -webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
   -ms-transition: 1s cubic-bezier(1, 0, .5, 1);
  
}

.skills .skill .skill-bar span b {
   float: left;
   width: 100%;
   position: relative;
   text-align: right;
   opacity: 0;
   font-size: 145%;
   color: #1D91F2;
   font-weight: 400;
   top: -30px;
  
}


.info-list{
  font-size:25px;
  list-style: none;
  text-align: left;
  letter-spacing: .4rem;
	line-height: 4.1rem;
	  margin-top:10%;
 
  
}

.skills-part{
  width: 100%;
  max-width: 700px;
  
}


.h9-information{
   font-family: 'Squada One', cursive;

}

.h10-skills{
 font-family: 'Squada One', cursive;  
  
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skills-part col-md-6">
  <h10 class="h10-skills"style="font-size:30px; opacity:0.9;"><strong>SKILLS</strong></h10>
<div class="skills">
   <!-- skill -->
   <div class="skill">
      <!-- title -->
      <div class="skill-title"><strong>
         HTML5</strong>
      </div>
      <!-- bar -->
      <div class="skill-bar" data-bar="90"><span></span></div>
   </div>
   <!-- #skill -->
   <!-- skill -->
   <div class="skill">
      <!-- title -->
      <div class="skill-title"><strong>
         CSS3
      </strong></div>
      <!-- bar -->
      <div class="skill-bar" data-bar="70"><span></span></div>
   </div>
   <!-- #skill -->
   <!-- skill -->
   <div class="skill">
      <!-- title -->
      <div class="skill-title"><strong>
         JQUERY
      </strong></div>
      <!-- bar -->
      <div class="skill-bar" data-bar="60"><span></span></div>
   </div>
   <!-- #skill -->
   <!-- skill -->
   <div class="skill">
      <!-- title -->
      <div class="skill-title"><strong>
         JAVASCRIPT
      </strong></div>
      <!-- bar -->
      <div class="skill-bar" data-bar="80"><span></span></div>
   </div>
   <!-- #skill -->
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题