jQuery animer et les valeurs de propriété en pourcentage

Que j'essaie d'animer un div et j'essaie d'utiliser la valeur récupéré quelque part d'autre, je sais la valeur correcte parce que j'ai imprimé la sortie... alors je me demandais pourquoi ne pas fonctionner correctement?

animateBar(percentage.toFixed(2)+'%');

[ . . . ]

function animateBar(percentage)
{
    $('#innerBox').animate({width: percentage}, 3000);
}

source d'informationauteur haunted85

  1. 22

    Il semble que theres un bug avec l'aide d'un pourcentage à animer. http://bugs.jquery.com/ticket/10669

    Je suggère de calculer le nombre de pixels à ajouter vous-même, quelque chose comme cela peut fonctionner:

    percent = 0.25;
add_width = (percent*$('#innerBox').parent().width())+'px';
$('#innerBox').animate({'width': '+='+add_width}, 3000);
  2. 7

    Ce fonctionne si vous êtes heureux à l'aide de transitions CSS3:

    JS:

    function animateBar(percentage){
    $('#innerBox').width(percentage+'%');
}

    CSS:

    #innerBox{transition: 3s}
  3. 4

    C'est assez vieux, mais de cette façon est de travailler pour moi:

    wthSelected = 85;
$(this).animate({
    width:wthSelected+'%'
  }, 1500);

    Aussi je suis en utilisant jquery-1.11.2.min.js et jquery.mobile-1.4.5.min.js

  4. 2

    Essayez d'ajouter les unités de texte comme ceci:

    function animateBar(percentage)
{
    $('#innerBox').animate({width: percentage+"px"}, 3000);
}
  5. 0

    Il peut être que vous êtes en permettant à 2 décimales pour le pourcentage. Avez-vous essayé d'utiliser une valeur entière à la place? Je ne suis pas sûr que tous les navigateurs prennent en charge flottante, les pourcentages.

    Aussi, assurez-vous que $('#innerBox') a un ensemble width pour commencer. Il n'a pas à être un pourcentage. Il vient d'être définie dans le CSS ou par le biais d'une méthode JS.

  6. -1

    Si c'est, en pourcentage, alors essayez celui-ci ici

    function animateBar(percentage) {
    percentage = percentage+"%";
    $('#innerBox').animate({'width': percentage}, 3000);
}

    nous utilisons une propriété css ici, donc n'oubliez pas les guillemets simples, de sorte qu'il doit être 'largeur' a pas la largeur