gpt4 book ai didi

javascript - 如何在Bootstrap中为*独立*几个进度条部分设置动画?

转载 作者:行者123 更新时间:2023-12-04 15:28:56 32 4
gpt4 key购买 nike

我有一些 Bootstrap 代码,当用户查看它时,它可以很好地为进度条部分设置动画。

然而它动画 全部 页面中的进度条而不是动画仅限 该查看部分中的进度条。结果,当用户转到进度条的另一部分时,这些已经是动画的,他看不到任何动画。

那么我的问题是:如何修改下面的代码以在查看不同部分时独立制作动画?

CSS

#skills {
padding: 60px 0;
}

#skills .progress {
height: 35px;
margin-bottom: 10px;
}

#skills .progress .skill {
font-family: "Open Sans", sans-serif;
line-height: 35px;
padding: 0;
margin: 0 0 0 20px;
text-transform: uppercase;
}

#skills .progress .skill .val {
float: right;
font-style: normal;
margin: 0 20px 0 0;
}

#skills .progress-bar {
width: 1px;
text-align: left;
transition: .9s;
}

JS

// Skills section
$('#skills').waypoint(function() {
$('.progress .progress-bar').each(function() {
$(this).css("width", $(this).attr("aria-valuenow") + '%');
});
}, { offset: '80%'} );

HTML


<!-- The first section of progress bars somewhere in the page -->
<section id="skills">
<div class="skills-content">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset 1 - Skill 1 <i class="val"></i></span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset 1 - Skill 2 <i class="val"></i></span>
</div>
</div>
</section>

<!-- Another section of progress bars further down the page -->
<section id="skills">
<div class="skills-content">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset N - Skill 1 <i class="val"></i></span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset N - Skill 2 <i class="val"></i></span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset N - Skill 3 <i class="val"></i></span>
</div>
</div>
</section>

最佳答案

我只是注意到你没有正确关闭你的部分元素和其他标签

<section class="skills">
<div class="skills-content">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria- valuemax="100">
</div>
<span class="skill">Skillset 1 - Skill 1 <i class="val"></i></span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- valuemax="100">
</div>
<span class="skill">Skillset 1 - Skill 2 <i class="val"></i></span>
</div>
</div>
</section>

<!-- Another section of progress bars further down the page -->
<section class="skills">
<div class="skills-content">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria- valuemax="100">
</div>
<span class="skill">Skillset N - Skill 1 <i class="val"></i></span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria- valuemax="100">
</div>
<span class="skill">Skillset N - Skill 2 <i class="val"></i></span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- valuemax="100">
</div>
<span class="skill">Skillset N - Skill 3 <i class="val"></i></span>
</div>
</div>
</section>

当你的航点功能调用你所有的进度元素而不是只有子进度元素时
$('#skills').waypoint(function() {
$('.progress .progress-bar').each(function() { // <- you are getting all progress elements
$(this).css("width", $(this).attr("aria-valuenow") + '%');
});
}, { offset: '80%'} );

改成
$('.skills').waypoint(function () {
var el = this.element;
var children = $(el).find(".progress-bar");
$(children).each(function () { // <- make sure getting only children elements
$(this).css("width", $(this).attr("aria-valuenow") + '%');
});
}, { offset: '80%' });

并确保其他技能部分在页面加载时不被用户查看(不在视口(viewport)中)

render

关于javascript - 如何在Bootstrap中为*独立*几个进度条部分设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58413891/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com