jQueryをクリックしてanimate（）をトリガーする方法

Question

私はバックグラウンドアニメーションを持つスキルバーを持っています。スキルバーが最初に表示されているにもかかわらず、スキルバーが表示されるようにボタンをトリガーしなければならないときは、アニメーションは機能していないようです。実際は動作しますが、別のボタンを押すだけです。

ありがとうございました。私の英語には申し訳ありません。

はここに私のバイオリン https://jsfiddle.net/mnvfdkf4/2/
ブートストラップドキュメントです：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

問題は、クリック後のことですクラスinはまだ設定されていません。

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

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

Answer 2

コードのブロックを投稿して作るしないようにしよう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(); 
});