HTML, CSS i JS Animowanie Wiele barów Progress

Question

Więc próbuję animowanie wielu paski postępu na jednej stronie, tutaj jest HTML dla moich paski postępu:

<div class="col-md-5"> 
    <p>HTML & CSS</p> 
    <div class="progress progress-striped active"> 
    <div class="progress-bar progress-bar-danger" style="width: 50%;"></div> 
    </div> 
    <p>C#</p> 
    <div class="progress progress-striped active"> 
    <div class="progress-bar progress-bar-danger" style="width: 20%;"></div> 
    </div> 
    <p>WordPress</p> 
    <div class="progress progress-striped active"> 
    <div class="progress-bar progress-bar-danger" style="width: 30%;"></div> 
    </div> 
    <p>Photoshop</p> 
    <div class="progress progress-striped active"> 
    <div class="progress-bar progress-bar-danger" style="width: 20%;"></div> 
    </div> 
</div> 

Jestem również za pomocą tego kodu w moim CSS Stylizacja

.progress.active .progress-bar { 
    -webkit-transition: none !important; 
    transition: none !important; 
} 

A to jest moja funkcja JS:

$(".progress-bar").animate({width: "10%"}, 2500); 

Używanie tego wszystkie 4 bary są animowane, ale chciałbym anim zjadł każdy pasek o innej wartości.

Answer 1

Można kierować poszczególne paski za pomocą .eq(), która pobiera indeks jako parametr określający żądany pasek.

$(".progress-bar").eq(0); // First bar 
$(".progress-bar").eq(1); // Second bar 

Stąd po prostu wywołaj metodę animacji dla wybranego elementu. Przechowywanie początkowego połączenia $(".progress-bar") jest również uważane za dobrą praktykę.

var $bars = $(".progress-bar"); 
$bars.eq(0).animate({width: "10%"}, 2500); 
$bars.eq(1).animate({width: "5%"}, 2500); 

Answer 2

w ten sposób możesz to zrobić.

$(document).ready(function() { 
    $(".progress-bar").each(function (index) { 
     if(index >=0 && index<=1) 
     { 
      $(this).animate({width: "5%"}, 2500); 
     } 
    }) 
});  

http://jsfiddle.net/tridip/80cww0qr/

możemy również zwiększyć pasek postępu losowo, którego wartość będzie wynosić od 1 do 100

$(this).animate({width: Math.floor((Math.random() * 100) + 1) + "%"}, 2500); 

http://jsfiddle.net/tridip/80cww0qr/1/