Estimados estaría agradecido de su ayuda , estoy generando unas barras de progreso por decirlo de alguna forma, las genero de forma dinámica con PHP según una consulta a una base de datos, resulta ser que estoy intentando animar el ancho de estas barras de forma progresiva con la función animate(), pero en ocasiones el ancho no parte de 0 si no que a veces parte del 10 o 20% o simplemente no se muestra la animación
Aquí muestro el contenido dinámico mediante Ajax y luego animo los elementos
$(document).ready(function(){
mostrar_registros();
pagina_activa();
});
function mostrar_registros(){
var action = 'fetch_data';
var clave = "<?php echo $_GET['clave'];?>"
$.ajax({
url:"<?php echo $raiz;?>logica/mostrar_servicio.php",
method: "POST",
dataType: "json",
data:{ action:action,clave:clave},
success:function(data){
$('.listado_registros').html(data.html1);
animar_ancho(".nm-fabrica",50,10);
animar_ancho(".hp-fabrica",50,10);
}
});
}
function animar_ancho(elemento,ancho,velocidad){
$(elemento).animate({width: ancho+"%"}, velocidad);
}
Aquí el script PHP que genera las barras que vendrían siendo los hr
<?php
$CONTENIDO = '';
$repros = $con->obtenerdatos("*",'estadisticas_repro',"?",[1]);
if(count($repros) > 0){
$CONTENIDO .= ' <div class="container estadisticas-repro mb-4">
<div class="row">';
for($x = 0;$x < count($repros);$x++){
$fila = $repros[$x];
$hp_total = $fila['hp_fabrica'] + $fila['hp_maximo'];
$hp_repro = $fila['hp_fabrica'] + $fila['hp_ganancia'];
$nm_total = $fila['nm_fabrica'] + $fila['nm_maximo'];
$nm_repro = $fila['nm_fabrica'] + $fila['nm_ganancia'];
$CONTENIDO .= ' <div class="col-12 text-center">
<h3>'.$fila['descripcion'].'</h3>
</div>
<div class="col-6">
<h6>HP FABRICA<span><strong class="float-right">'.$fila['hp_fabrica'].'</strong></span></h6>
<div class="contenedor-line">
<hr class="line-maximo" style="width:calc((100% / '.$hp_total.') * '.$hp_total.')">
<hr class="line-fabrica hp-fabrica">
</div>
<h6 class="mt-3">NM FABRICA<span><strong class="float-right">'.$fila['nm_fabrica'].'</strong></span></h6>
<div class="contenedor-line">
<hr class="line-maximo" style="width:calc((100% / '.$nm_repro.') * '.$nm_repro.')">
<hr class="line-fabrica nm-fabrica">
</div>
</div>
<div class="col-6">
<h6>HP GANANCIA<span><strong class="float-right">'.$hp_repro.' (<span class="text-danger">+'.$fila['hp_ganancia'].'</span>)</strong></span></h6>
<div class="contenedor-line">
<hr class="line-maximo" style="width:calc((100% / '.$hp_total.') * '.$hp_total.')">
<hr class="line-ganancia" style="width:calc((100% / '.$hp_total.') * '.($fila['hp_fabrica'] + $fila['hp_ganancia']).')">
<hr class="line-fabrica" style="width:calc((100% / '.$hp_total.') * '.$fila['hp_fabrica'].')">
</div>
<h6 class="mt-3">NM GANANCIA<span><strong class="float-right">'.$nm_repro.' (<span class="text-danger">+'.$fila['nm_ganancia'].'</span>)</strong></span></h6>
<div class="contenedor-line">
<hr class="line-maximo" style="width:calc((100% / '.$nm_total.') * '.$nm_total.')">
<hr class="line-ganancia" style="width:calc((100% / '.$nm_total.') * '.($fila['nm_fabrica'] + $fila['hp_ganancia']).')">
<hr class="line-fabrica" style="width:calc((100% / '.$nm_total.') * '.$fila['nm_fabrica'].')">
</div>
</div>';
}
$CONTENIDO .= ' </div>
</div>
';
}