8

Estoy haciendo una animación y he encontrado el siguiente pen: CodePen

Código del pen:

$({percentage: 0}).stop(true).animate({percentage: value}, {
    duration : 2000,
    easing: "easeOutExpo",
    step: function () {
        // percentage with 1 decimal;
        var percentageVal = Math.round(this.percentage * 10) / 10;

        $el.text(percentageVal + '%');
    }
})

Selector:

$({percentage: 0}).stop(true).animate({percentage: value}, {...});

  • ¿Que cambia?
  • ¿Para que sirve?
  • En caso de especificar propiedades de jQuery , ¿Que hace la de percentage?

Supongo que jquery tendra un JSON de propiedades y se cambiaran de está manera, pero no lo había visto antes.

1 respuesta 1

8

$({percentage: 0}) es el contexto en el cual la animacion va a trabajar y cuando le indicas cual es la propiedad en el metodo animate(), este buscara la propiedad indicada sobre el contexto y le aplica la animacion.

Si te fijas, notaras como en el cuerpo de step() se utiliza this para acceder a la propiedad porcentage definida en el objeto pasado por el constructor de jquery, que es el contexto:

 step: function () {
             // accediendo al contexto provisto en el constructor de jquery
                                        ↓
        var percentageVal = Math.round(this.percentage * 10) / 10;

        $el.text(percentageVal + '%');
    }

TL;DR {percentage: 0} representa el contexto enviado al constructor de jquery. .animate({percentage: value},{}) representa la propiedad a animar basado en el contexto.

1
  • Muchas gracias @Einer! No encontraba nada de info sobre esto...
    – x3k
    Commented el 13 jun. 2019 a las 14:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.