Question

我有带背景动画的技能栏。技能栏最初可见时很好，但是当我触发按钮使技能栏可见时，动画似乎无法正常工作。实际上它工作，但只是我推另一个按钮。

提前致谢并抱歉我的英语！

这是我的小提琴 https://jsfiddle.net/mnvfdkf4/2/
Bootstrap doc：http://getbootstrap.com/javascript/#collapse

HTML

<a class="btn btn-secondary collapse-control" type="button" data-toggle="collapse" href="#collapseLangages" aria-expanded="true" aria-controls="collapseLangages">Langages</a>
<a class="btn btn-secondary collapse-control" type="button" data-toggle="collapse" href="#collapseFrameworks" aria-expanded="false" aria-controls="collapseFrameworks">Frameworks</a>
<a class="btn btn-secondary collapse-control" type="button" data-toggle="collapse" href="#collapseCMS" aria-expanded="false" aria-controls="collapseCMS">CMS</a>

<div class="collapse in" id="collapseLangages">
    <div class="skillbar clearfix " data-percent="90%">
        <div class="skillbar-title" style="background: #E34F26<span>HTML5</span></div>
        <div class="skillbar-container">
            <div class="skillbar-bar" style="background: #e67e22;"></div>
        </div>
        <div class="skill-bar-percent">90%</div>
    </div> <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="90%">
        <div class="skillbar-title" style="background: #2980b9;"<span>CSS3</span></div>
        <div class="skillbar-container">
            <div class="skillbar-bar" style="background: #3498db;"></div>
        </div>

的jQuery

  function animateSkillbar(){
    $('.in .skillbar').each(function(){
        $(this).find('.skillbar-bar').animate({
            width:$(this).attr('data-percent')
        },5000);
    });     
}
animateSkillbar();

$( ".collapse-control" ).on( "click", function() {
    animateSkillbar();
});

Answer 1

替换Javascript

 function animateSkillbar(){  
    $('.in .skillbar').each(function(){
    $(this).find('.skillbar-bar').attr("width",0))
    $(this).find('.skillbar-bar').animate({
            width:$(this).attr('data-percent')
        },1000);
    });     
}
animateSkillbar();

$( ".collapse-control" ).on( "click", function() {
$('.in .skillbar-bar').each(function(b){

 console.log($('.in .skillbar-bar').eq(b)[0].style.width = 0)
})
   animateSkillbar();
});

Answer 2

问题是点击课程in后尚未设置。因此，当崩溃元素对用户可见时，您需要捕获shown.bs.collapse事件：

$('.collapse').on('shown.bs.collapse', function () {
  animateSkillbar();
})

[https://jsfiddle.net/0qa3u3wu/]

如何使用jQuery

2 个答案: