HTML, CSS und JS Animate mehrere Statusleisten

Question

So auf einer Seite mehrere Fortschrittsbalken zu animieren, hier die HTML für Ich versuche, meine Fortschritte Bars ist:

<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> 

ich auch diesen Code verwende in meinem CSS Styling

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

Und das ist meine JS-Funktion:

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

diese verwenden, werden alle 4 Bars sind animiert, aber ich möchte anim aß jeden Balken mit einem anderen Wert.

Answer 1

Sie können die einzelnen Balken unter Verwendung von .eq() als Ziel auswählen, wobei ein Index als Parameter verwendet wird, um den gewünschten Balken anzugeben.

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

Von hier aus rufen Sie einfach die animierte Methode für das ausgewählte Element. Das Speichern der ersten $(".progress-bar")-Verbindung wird ebenfalls als gute Praxis angesehen.

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

Answer 2

so können Sie es auch tun.

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

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

wir können auch zufällig Fortschrittsbalken erhöhen, deren Wert wird zwischen 1 und 100

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

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