Comment ajouter + 200 ms à la durée de l'animation CSS en cliquant sur jQuery

Nippledisaster

Il y a un div avec une animation css

.mydiv {
    animation: ticker 2000ms linear 0s infinite normal none running;
}

La animation-durationpropriété est définie sur 2000ms et j'essaye de changer la vitesse de l'animation avec jquery par exemple en ajoutant 200ms à la valeur courante

quelque chose comme

$( "#speedup" ).click(function() {
 var mydiv = $( ".mydiv" );
 var val = mydiv.css('animation-duration');
 $(".mydiv").css("animation-duration", val + "ms")+200;
});
ElBrm

La variable «val» n'est pas un entier (2s). Vous ne pouvez pas multiplier avec cette valeur. Vous devez utiliser parseInt () pour renvoyer l'entier (2).

$('#speedup').click(function(){

       var mydiv = $( ".mydiv" );
       var val = mydiv.css('animation-duration');
       var newVal = (parseInt(val) * 1000); //parseInt(val) creates the integer 2. Multiply with 1000 to get 2000

       mydiv.css({"animation-duration" : newVal - 200 + "ms"});

 });

Edit: ParseFloat est encore meilleur. De cette façon, vous pouvez utiliser toFixed pour obtenir l'entier avec 2 décimales.

https://jsfiddle.net/qcajbtz8/

$('#speedup').click(function(){

                var mydiv = $( ".mydiv" );
                var val = mydiv.css('animation-duration');
                var newVal = (parseFloat(val).toFixed(2) * 1000);

                mydiv.css({"animation-duration" : newVal - 200 + "ms"});

            });

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

TOP liste

  1. 1

    Comment utiliser HttpClient avec TOUT cert ssl, quelle que soit la « mauvaise » est

  2. 2

    Comment afficher du texte au milieu de div avec une couleur d'arrière-plan différente?

  3. 3

    Résultat de l'échantillonneur JMeter : comprendre le temps de chargement, le temps de connexion et la latence

  4. 4

    Modbus Python Schneider PM5300

  5. 5

    Pourquoi Object.hashCode () ne suit pas la convention du code Java

  6. 6

    Comment faire une recherche partielle et obtenir un score pertinent dans Elasticsearch

  7. 7

    Existe-t-il un moyen de voir si mon bot est hors ligne ?

  8. 8

    Comment choisir le nombre de fragments et de répliques Elasticsearch

  9. 9

    optimiser les opérations du serveur avec elasticsearch: traitement des filigranes de disque bas

  10. 10

    Comment changer la couleur de la police dans R?

  11. 11

    Autocomplete avec java, Redis, Recherche élastique, Mongo

  12. 12

    MasterService d'ElasticSearch prend trop de temps pour calculer l'état du cluster et lancer ProcessClusterEventTimeoutException

  13. 13

    Comment vérifier si un utilisateur spécifique a un rôle? Discord js

  14. 14

    Spring @RequestParam DateTime format comme ISO 8601 Date Heure facultative

  15. 15

    Comment analyser un hachage Ruby plat en un hachage imbriqué?

  16. 16

    Comment créer une nouvelle application dans Dropbox avec des autorisations complètes

  17. 17

    Quelque chose dans le cluster Elasticsearch 7.4 devient de plus en plus lent avec les délais de lecture de temps en temps

  18. 18

    Ajustement non linéaire avec R

  19. 19

    php ajouter et fusionner des données de deux tables

  20. 20

    Exporter la table de l'arborescence vers CSV avec mise en forme

  21. 21

    帶有 Spring Boot 和 Azure AD 的 KeyCloak

chaudétiquette

Archive