如何使用jQuery觸發animate（）點擊使用

我擁有帶背景動畫的技能欄。當技能欄最初可見時，這很好，但當我必須觸發按鈕以使技能欄可見時，動畫似乎不起作用。其實它的作品，但只是我推另一個按鈕。如何使用jQuery觸發animate（）點擊使用

在此先感謝和抱歉我的英語！

這裏是我的小提琴 https://jsfiddle.net/mnvfdkf4/2/
引導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(); 
});

來源

2016-04-25 Quinox

儘量不要張貼的代碼塊，使你的問題的一個小的，可重現的例子。超過50行的任何內容，尤其是您的整個程序，都很難被其他人調試。 –

由於寬度已設置，因此不設置動畫。將寬度更改爲0並設置動畫 – Vinny

@AlexanderHuszagh現在應該會更好。 :)寬度已經定義爲0在CSS（小提琴56線） – Quinox

的問題是，點擊後尚未設置類in。因此，你需要趕上shown.bs.collapse事件時崩潰元素已經取得了對用戶可見：

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

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

來源

2016-04-25 22:49:16

這正是我一直在尋找。非常感謝你！ – Quinox

更換的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(); 
});

來源

2016-04-25 22:59:30 Vinny

如何使用jQuery觸發animate（）點擊使用

回答

相關問題