2
4つのプログレスバーがあり、表示位置を下にスクロールするとパーセンテージが複数回表示されます。私は問題を解決しようとしていますが、私はすべて私の時間を取っています。スクロールでアニメーションをトリガーするためのjqueryコードを追加すると、私はすべての複製を取得します。 ご意見をお待ちしております。スクロールでトリガされたときにJQueryがパーセンテージ記号を複数回複製しています
$(window).scroll(function(){
var bottom_of_window = $(window).scrollTop() + $(window).height();
\t $(".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;
\t line-height: 4.1rem;
\t 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
'$（この）.append（ '' + $（この）.parent（）のattr（ "データバー"）+ '％'）;'ので、あなたはそれを追加しています。一度入れるだけです。 – masterpreenz